<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="com.bcb.dao.UserDAO, com.bcb.model.User" %>
<%@ page import="com.bcb.dao.SystemSettingDAO, com.bcb.model.SystemSetting" %>
<%
    // 1. 获取 username
    String username = request.getParameter("username");
    if (username == null) {
        username = (String) session.getAttribute("username");
        if (username == null) {
            response.sendRedirect("Login.jsp");
            return;
        }
    } else {
        session.setAttribute("username", username);
    }
	
    UserDAO curUserDAO = new UserDAO();
    User currentUser = curUserDAO.findByUsername(username);
    //String currentUserType = curUserDAO.getUserTypeById(currentUser.getUserId());
    SystemSettingDAO systemsettingDAO = new SystemSettingDAO();
 // 2. 从 session 或数据库里取 userId
    Integer userId = (Integer) session.getAttribute("userId");
 	String userType  = (String) session.getAttribute("userType");
    if (userId == null) {
        userId = currentUser.getUserId();
        userType = currentUser.getUserType().name();
        session.setAttribute("userId", userId);
    }

    String ctx = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名片册系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="assets/css/share-management.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background: linear-gradient(135deg, #3a7bd5, #00d2ff);
            color: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }
        
        header h1 {
            font-size: 24px;
            position: relative;
            z-index: 1;
        }
        
        header .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            position: relative;
            z-index: 1;
        }
        
        /* Header particles effect */
        header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="10" cy="10" r="2" fill="rgba(255,255,255,0.3)"/></svg>');
            opacity: 0.3;
            animation: backgroundMove 30s linear infinite;
        }
        
        @keyframes backgroundMove {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 1000px 1000px;
            }
        }
        
        .menu-bar {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .menu-bar button {
            background-color: #f8f9fa;
            border: none;
            border-radius: 4px;
            padding: 8px 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            color: #4a4a4a;
            transition: all 0.3s ease;
        }
        
        .menu-bar button:hover {
            background-color: #e9ecef;
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        }
        
        .menu-bar button i {
            font-size: 16px;
        }
        
        .dropdown-btn {
            position: relative;
        }
        
        .dropdown-icon {
            margin-left: 5px;
        }
        
        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            padding: 5px 0;
            min-width: 150px;
            display: none;
            z-index: 100;
            animation: dropdownFadeIn 0.3s ease;
        }
        
        @keyframes dropdownFadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .dropdown-menu.active {
            display: block;
        }
        
        .dropdown-menu a {
            display: block;
            padding: 8px 15px;
            color: #4a4a4a;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        
        .dropdown-menu a:hover {
            background-color: #f8f9fa;
            color: #3a7bd5;
        }
        
        .card-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 20px;
        }
        

        

        .content-area {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 20px;
            min-height: 400px;
            width: 100%;
        }
        
        .tab-container {
            display: flex;
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #f5f5f5;
            border: 1px solid #e0e0e0;
            border-bottom: none;
            border-radius: 5px 5px 0 0;
            margin-right: 5px;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .tab:hover {
            background-color: #e9ecef;
        }
        
        .tab.active {
            background-color: white;
            border-bottom: 2px solid white;
            margin-bottom: -1px;
            color: #3a7bd5;
            font-weight: bold;
        }
        
        .tab-content {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        .tab-content.active {
            display: block;
        }
        

        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            overflow: auto;
        }
        
        .modal-content {
            background-color: white;
            margin: 10% auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            width: 80%;
            max-width: 600px;
            position: relative;
            animation: modalFadeIn 0.4s;
        }
        
        .modal-content {
		    max-height: 90vh;
		    overflow-y: auto;
		}
		        
        .modal-content2 {
        	background-color: white;
            margin: 10% auto;
            width: 70%;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            position: relative;
            animation: modalFadeIn 0.4s;
        }
        
        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        
        .modal-header h2 {
            color: #333;
            font-size: 20px;
        }
        
        .close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s ease;
        }
        
        .close:hover {
            color: #333;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: #3a7bd5;
            outline: none;
            box-shadow: 0 0 0 3px rgba(58, 123, 213, 0.2);
        }
        
        /* 批量新增样式                                                */
        .batchTableBody input {
        	width: 150px;
        	padding: 5px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        } 
        .batchTableBody input:focus {
        	border-color: #3a7bd5;
            outline: none;
            box-shadow: 0 0 0 3px rgba(58, 123, 213, 0.2);
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        .btn {
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background-color: #3a7bd5;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #2c5aa0;
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(58, 123, 213, 0.3);
        }
        
        .btn-secondary {
            background-color: #f8f9fa;
            color: #4a4a4a;
        }
        
        .btn-secondary:hover {
            background-color: #e2e6ea;
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        }
        
        .btn:active {
            transform: translateY(0);
            box-shadow: none;
        }
        
        .table-view {
            width: 100%;
            border-collapse: collapse;
        }
        
        .table-view th,
        .table-view td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .table-view th {
            background-color: #f8f9fa;
            color: #4a4a4a;
            font-weight: bold;
        }
        
        .table-view tr:hover {
            background-color: #f5f5f5;
        }
        
        .table-view tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .message {
            position: fixed;
            top: 20px;
            right: 20px;
            max-width: 300px;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            color: white;
            z-index: 1000;
            transform: translateY(-100px);
            opacity: 0;
            transition: all 0.5s ease;
            display: flex;
            align-items: center;
        }
        
        .message.show {
            transform: translateY(0);
            opacity: 1;
        }
        
        .message i {
            margin-right: 10px;
            font-size: 20px;
        }
        
        .message.success {
            background-color: #28a745;
        }
        
        .message.error {
            background-color: #dc3545;
        }
        
        .message.info {
            background-color: #17a2b8;
        }
        
        /* Search and replace dialog */
        
/*----------------------------------------------------------查找新增-------------------------------------------*/
        /* 搜索范围选择区域样式 */
.search-scope {
    margin-top: 15px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.search-scope label {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    cursor: pointer;
    user-select: none;
}

.search-scope input[type="radio"] {
    margin-right: 6px;
    accent-color: #0d6efd; /* 使用主题色 */
}

/* 文件夹选择下拉框 */
#folderSelect {
    margin-top: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    transition: border-color 0.15s ease-in-out;
    font-size: 14px;
}

#folderSelect:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.7;
}

#folderSelect:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* 文件夹标签样式（搜索结果中显示） */
.folder-tag {
    display: inline-block;
    background-color: #e9ecef;
    color: #495057;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
    margin-left: 10px;
    vertical-align: middle;
}

/* 响应式调整 */
@media (max-width: 576px) {
    .search-scope label {
        display: block;
        margin-bottom: 8px;
    }
    
    .search-scope input[type="radio"] {
        margin-right: 8px;
    }
}
  #replaceResults {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .result-item {
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
  }

  .result-item strong {
    font-size: 16px;
    color: #333;
  }

  .result-item em {
    font-style: normal;
    color: #666;
    margin-right: 4px;
  }

  .result-item span {
    font-weight: bold;
    background-color: #fff7a3;
    padding: 2px 4px;
    border-radius: 4px;
  }

  .folder-path {
    color: #888;
    font-size: 13px;
    margin-top: 6px;
  }
        
       .highlight {
  background-color: yellow;
  font-weight: bold;
}
         .replaced {
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }
  .result-item.replaced .highlight {
    background-color: transparent;
    color: inherit;
    font-weight: normal;
  }
/*----------------------------------------------------------查找新增-------------------------------------------*/
        
        .search-container {
            margin-bottom: 15px;
        }
        
        .search-container input[type="text"] {
            padding: 8px;
            width: 70%;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-right: 10px;
        }
        
        .search-container select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .search-actions {
            margin-top: 10px;
            display: flex;
            gap: 10px;
        }
        

        
        /* Recycle bin */
        .recycle-list {
            width: 100%;
            border-collapse: collapse;
        }
        
        .recycle-list th, .recycle-list td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .recycle-list th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        
        .context-menu {
            position: absolute;
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            padding: 5px 0;
            min-width: 150px;
            z-index: 1000;
            display: none;
            animation: fadeIn 0.2s ease;
        }
        
        .context-menu a {
            display: block;
            padding: 8px 15px;
            color: #4a4a4a;
            text-decoration: none;
            transition: background-color 0.3s;
            cursor: pointer;
        }
        
        .context-menu a:hover {
            background-color: #f8f9fa;
            color: #3a7bd5;
        }
        
        /* Progress bar */
        .progress-container {
            width: 100%;
            background-color: #f8f9fa;
            border-radius: 4px;
            margin: 15px 0;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 20px;
            background: linear-gradient(135deg, #3a7bd5, #00d2ff);
            border-radius: 4px;
            width: 0%;
            transition: width 0.3s ease;
            text-align: center;
            line-height: 20px;
            color: white;
            font-size: 12px;
            position: relative;
        }
        
        .progress-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            animation: shimmer 2s infinite;
        }
        
        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }
        
        /* User permissions management */
        .tabs-container {
            margin-bottom: 20px;
        }
        
        .permission-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .user-list {
            height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
        }
        
        .user-item {
            padding: 8px;
            margin-bottom: 5px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: background-color 0.3s;
        }
        
        .user-item:hover {
            background-color: #f8f9fa;
        }
        
        .user-item.active {
            background-color: #e9ecef;
        }
        
        .permission-check {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .permission-check i {
            font-size: 18px;
            margin-right: 10px;
            cursor: pointer;
        }
        
        .permission-check i.fa-check {
            color: #28a745;
        }
        
        .permission-check i.fa-times {
            color: #dc3545;
        }
        
        /* Card detail view */
        .card-detail {
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .card-detail h2 {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .card-detail .info-item {
            margin-bottom: 10px;
            display: flex;
        }
        
        .card-detail .info-label {
            width: 120px;
            font-weight: bold;
            color: #666;
        }
        
        .card-detail .info-value {
            flex: 1;
        }
        
        /* Loading indicator */
        .loader {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 2000;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .loader-content {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3a7bd5;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Custom animations for the cards and folders */
        @keyframes floatAnimation {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px);
            }
            100% {
                transform: translateY(0);
            }
        }
        
        .float-animation {
            animation: floatAnimation 3s ease-in-out infinite;
        }
        
        /* Wave effect for header */
        @keyframes wave {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 1000px 0;
            }
        }
        
        header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 15px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="white" fill-opacity="0.2" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,160C960,139,1056,149,1152,154.7C1248,160,1344,160,1392,160L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
            background-size: 100% 100%;
            animation: wave 10s linear infinite;
        }
        

		
		/* 空状态提示样式 */
		.empty-message {
		    width: 100%;
		    text-align: center;
		    padding: 20px;
		    color: #666;
		    font-style: italic;
		}
		
		/* 按钮链接样式修复 */
		.btn-link {
		    background: none;
		    border: none;
		    color: #3a7bd5;
		    cursor: pointer;
		    padding: 0 5px;
		}
		
		.btn-link:hover {
		    color: #2c5aa0;
		}
		
		/* 修复移动设备上的响应式布局 */
		@media (max-width: 768px) {
		    .menu-bar {
		        flex-wrap: wrap;
		    }
		    
		    .menu-bar button {
		        margin-bottom: 5px;
		    }
		    
		    .card-list {
		        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		    }
		    
		    .form-actions {
		        flex-direction: column;
		        gap: 5px;
		    }
		    
		    .form-actions .btn {
		        width: 100%;
		    }
		}
		
		/* 修复模态框在小屏幕上的显示 */
		@media (max-width: 576px) {
		    .modal-content {
		        width: 95%;
		        margin: 5% auto;
		    }
		}
		
		/* 添加表格响应式样式 */
		@media (max-width: 992px) {
		    .table-view {
		        display: block;
		        overflow-x: auto;
		    }
		}
		
		/* 导入导出模态框样式 */
		.export-modal .modal-content {
		    max-width: 600px;
		}
		
		.file-hint {
		    display: block;
		    margin-top: 4px;
		    color: #666;
		    font-size: 12px;
		}
		
		.file-hint i {
		    margin-right: 4px;
		}
		
		/* 格式说明样式 */
		.format-guide {
		    background: #f8f9fa;
		    border: 1px solid #e9ecef;
		    border-radius: 8px;
		    padding: 15px;
		    margin: 15px 0;
		}
		
		.format-content h4 {
		    margin: 0 0 10px 0;
		    color: #495057;
		    font-size: 14px;
		}
		
		.field-mapping {
		    display: grid;
		    gap: 8px;
		    margin-bottom: 15px;
		}
		
		.field-item {
		    display: flex;
		    align-items: center;
		    gap: 10px;
		    padding: 8px;
		    background: white;
		    border-radius: 4px;
		    border: 1px solid #dee2e6;
		}
		
		.field-primary {
		    font-weight: bold;
		    color: #495057;
		    min-width: 80px;
		}
		
		.field-required {
		    background: #dc3545;
		    color: white;
		    padding: 2px 6px;
		    border-radius: 10px;
		    font-size: 10px;
		}
		
		.field-optional {
		    background: #6c757d;
		    color: white;
		    padding: 2px 6px;
		    border-radius: 10px;
		    font-size: 10px;
		}
		
		.field-alias {
		    color: #6c757d;
		    font-size: 12px;
		    flex: 1;
		}
		
		.format-note {
		    background: #fff3cd;
		    border: 1px solid #ffeaa7;
		    border-radius: 4px;
		    padding: 10px;
		    color: #856404;
		    font-size: 12px;
		}
		
		.format-note i {
		    color: #f39c12;
		    margin-right: 6px;
		}
		
		/* 进度条样式 */
		.progress-container {
		    margin: 15px 0;
		    background: #f8f9fa;
		    border-radius: 8px;
		    overflow: hidden;
		    border: 1px solid #dee2e6;
		}
		
		.progress-bar {
		    height: 30px;
		    background: linear-gradient(135deg, #3a7bd5, #00d2ff);
		    border-radius: 8px;
		    width: 0%;
		    transition: width 0.3s ease;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    color: white;
		    font-weight: bold;
		    font-size: 14px;
		    position: relative;
		}
		
		.progress-text {
		    text-align: center;
		    padding: 8px;
		    color: #495057;
		    font-size: 12px;
		}
		
		/* 导出范围信息 */
		.scope-info {
		    background: #e3f2fd;
		    padding: 12px;
		    border-radius: 4px;
		    border-left: 4px solid #2196f3;
		    font-size: 14px;
		}
		
		.scope-info i {
		    margin-right: 8px;
		    color: #2196f3;
		}
		
		/* 字段选择样式 */
		.field-selection {
		    background: #f8f9fa;
		    border: 1px solid #e9ecef;
		    border-radius: 8px;
		    padding: 15px;
		}
		
		.field-grid {
		    display: grid;
		    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		    gap: 10px;
		    margin-bottom: 15px;
		}
		
		.field-checkbox {
		    display: flex;
		    align-items: center;
		    padding: 8px 12px;
		    background: white;
		    border: 1px solid #dee2e6;
		    border-radius: 4px;
		    cursor: pointer;
		    transition: all 0.2s ease;
		    position: relative;
		}
		
		.field-checkbox:hover {
		    background: #f0f8ff;
		    border-color: #3a7bd5;
		}
		
		.field-checkbox input[type="checkbox"] {
		    display: none;
		}
		
		.checkmark {
		    width: 16px;
		    height: 16px;
		    border: 2px solid #dee2e6;
		    border-radius: 3px;
		    margin-right: 8px;
		    position: relative;
		    transition: all 0.2s ease;
		}
		
		.field-checkbox input[type="checkbox"]:checked + .checkmark {
		    background: #3a7bd5;
		    border-color: #3a7bd5;
		}
		
		.field-checkbox input[type="checkbox"]:checked + .checkmark::after {
		    content: '✓';
		    position: absolute;
		    top: -2px;
		    left: 2px;
		    color: white;
		    font-size: 12px;
		    font-weight: bold;
		}
		
		.field-checkbox input[type="checkbox"]:disabled + .checkmark {
		    background: #6c757d;
		    border-color: #6c757d;
		}
		
		.field-name {
		    flex: 1;
		    font-weight: 500;
		}
		
		.field-badge {
		    background: #28a745;
		    color: white;
		    padding: 2px 6px;
		    border-radius: 10px;
		    font-size: 10px;
		    margin-left: 8px;
		}
		
		.field-badge.required {
		    background: #dc3545;
		}
		
		.field-actions {
		    display: flex;
		    gap: 10px;
		}
		
		.btn-link {
		    background: none;
		    border: none;
		    color: #3a7bd5;
		    cursor: pointer;
		    padding: 4px 8px;
		    font-size: 12px;
		    text-decoration: none;
		    transition: color 0.2s ease;
		}
		
		.btn-link:hover {
		    color: #2c5aa0;
		    text-decoration: underline;
		}
		
		.btn-link i {
		    margin-right: 4px;
		}
		
		/* 导入结果样式 */
		.alert {
		    padding: 15px;
		    border-radius: 8px;
		    margin: 15px 0;
		    border: 1px solid transparent;
		}
		
		.alert-success {
		    background-color: #d4edda;
		    border-color: #c3e6cb;
		    color: #155724;
		}
		
		.alert-error {
		    background-color: #f8d7da;
		    border-color: #f5c6cb;
		    color: #721c24;
		}
		
		.alert h4 {
		    margin: 0 0 10px 0;
		    font-size: 16px;
		    display: flex;
		    align-items: center;
		}
		
		.alert h4 i {
		    margin-right: 8px;
		}
		
		.alert h5 {
		    margin: 15px 0 8px 0;
		    font-size: 14px;
		    color: #495057;
		}
		
		.alert ul {
		    margin: 8px 0;
		    padding-left: 20px;
		}
		
		.alert li {
		    margin: 4px 0;
		}
		
		.error-details {
		    max-height: 150px;
		    overflow-y: auto;
		    background: rgba(255,255,255,0.5);
		    padding: 10px;
		    border-radius: 4px;
		    font-family: monospace;
		    font-size: 11px;
		    border: 1px solid rgba(0,0,0,0.1);
		}
		
		.error-details p {
		    margin: 2px 0;
		    line-height: 1.4;
		}
		
		/* 响应式设计 */
		@media (max-width: 768px) {
		    .field-grid {
		        grid-template-columns: 1fr;
		    }
		    
		    .field-item {
		        flex-direction: column;
		        align-items: flex-start;
		        gap: 5px;
		    }
		    
		    .field-primary {
		        min-width: auto;
		    }
		}
		
		/* 权限管理专用样式 - 优化版本 */
/* 权限管理专用样式 - 蓝色主题优化版本 */
        .permission-modal-content {
            width: 90%;
            max-width: 1400px;
            height: 85vh;
            max-height: 800px;
            margin: 2.5vh auto;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(59, 130, 246, 0.15);
        }

        /* 权限标签页 - 蓝色渐变 */
        .permission-tabs {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
            border-radius: 12px 12px 0 0;
            padding: 0;
            margin-bottom: 0;
            position: relative;
            overflow: hidden;
        }

        .permission-tabs::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
            animation: float 20s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(180deg); }
        }

        .permission-tabs .tab {
            background: transparent;
            color: rgba(255, 255, 255, 0.85);
            border: none;
            padding: 16px 24px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
            cursor: pointer;
            font-weight: 500;
        }

        .permission-tabs .tab::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #ffffff, #bfdbfe);
            transition: width 0.3s ease;
        }

        .permission-tabs .tab::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .permission-tabs .tab:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            transform: translateY(-2px);
        }

        .permission-tabs .tab:hover::after {
            opacity: 1;
        }

        .permission-tabs .tab.active {
            background: rgba(255, 255, 255, 0.15);
            color: #ffffff;
            font-weight: 600;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .permission-tabs .tab.active::before {
            width: 100%;
        }

        .permission-tabs .tab i {
            margin-right: 10px;
            font-size: 18px;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
        }

        /* 用户组管理样式 */
        .user-group-management {
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 24px;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        }

        .management-header {
            text-align: center;
            margin-bottom: 24px;
            padding: 20px;
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            border-radius: 12px;
            border-left: 5px solid #3b82f6;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
        }

        .management-header h3 {
            margin: 0 0 8px 0;
            color: #1e40af;
            font-size: 20px;
            font-weight: 600;
        }

        .hint-text {
            margin: 0;
            color: #475569;
            font-size: 14px;
            font-style: italic;
        }

        .group-container {
		    display: grid;
		    grid-template-columns: 1fr 1fr;
		    gap: 20px;
		    flex: 1;
		    margin-bottom: 15px;  /* 减少底部边距 */
		    min-height: 0;  /* 重要：允许flex子项缩小 */
		    overflow: hidden;  /* 防止内容溢出 */
		}

        /* 3. 修复用户组区域的高度和滚动 */
		.user-group-section {
		    background: #ffffff;
		    border-radius: 16px;
		    border: 2px solid #e5e7eb;
		    transition: all 0.3s ease;
		    display: flex;
		    flex-direction: column;
		    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.08);
		    overflow: hidden;
		    min-height: 0;  /* 重要：允许flex子项缩小 */
		}

        .user-group-section:hover {
            border-color: #3b82f6;
            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
            transform: translateY(-2px);
        }

        .admin-section {
            border-left: 5px solid #ef4444;
        }

        .admin-section:hover {
            border-left-color: #dc2626;
        }

        .user-section {
            border-left: 5px solid #3b82f6;
        }

        .user-section:hover {
            border-left-color: #2563eb;
        }

        .section-header {
            padding: 20px 24px;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .section-header h3 {
            margin: 0;
            color: #374151;
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-count {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            color: white;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            min-width: 35px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        }

        .user-list {
            flex: 1;
            padding: 20px;
            min-height: 300px;
            max-height: 350px;
            overflow-y: auto;
            position: relative;
        }

        /* 5. 改进滚动条样式 */
		.user-list::-webkit-scrollbar {
		    width: 8px;  /* 稍微增加滚动条宽度 */
		}
		
		.user-list::-webkit-scrollbar-track {
		    background: #f1f5f9;
		    border-radius: 4px;
		}
		
		.user-list::-webkit-scrollbar-thumb {
		    background: #cbd5e1;
		    border-radius: 4px;
		}
		
		.user-list::-webkit-scrollbar-thumb:hover {
		    background: #94a3b8;
		}

        .user-list.drag-over {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            border: 2px dashed #3b82f6;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
            50% { transform: scale(1.02); box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
        }

        .user-item {
            padding: 16px 18px;
            margin-bottom: 12px;
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            cursor: grab;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 14px;
            position: relative;
            overflow: hidden;
        }

        .user-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(45deg, #3b82f6, #60a5fa);
            transform: scaleY(0);
            transition: transform 0.3s ease;
        }

        .user-item:hover::before {
            transform: scaleY(1);
        }

        .user-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
            border-color: #3b82f6;
        }

        .user-item.dragging {
            opacity: 0.8;
            transform: rotate(2deg) scale(1.05);
            cursor: grabbing;
            z-index: 1000;
            box-shadow: 0 15px 35px rgba(59, 130, 246, 0.3);
        }

        .user-item i {
            color: #3b82f6;
            font-size: 20px;
            width: 24px;
            text-align: center;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
        }

        .user-item .user-info {
            flex: 1;
        }

        .user-item .username {
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 4px;
            font-size: 15px;
        }

        .user-item .email {
            font-size: 12px;
            color: #6b7280;
        }

        /* 权限对比样式 */
        /* 7. 修复权限对比区域的布局 */
		.permission-comparison {
		    display: grid;
		    grid-template-columns: 1fr 1fr;
		    gap: 20px;
		    flex: 1;  /* 占用剩余空间 */
		    padding: 20px;
		    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
		    min-height: 0;  /* 重要：允许flex子项缩小 */
		}
		
		.permission-section {
		    background: #ffffff;
		    border-radius: 16px;
		    border: 1px solid #e5e7eb;
		    display: flex;
		    flex-direction: column;
		    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.08);
		    overflow: hidden;
		    min-height: 0;  /* 重要：允许flex子项缩小 */
		}

        .admin-permissions {
            border-left: 5px solid #ef4444;
        }

        .user-permissions {
            border-left: 5px solid #3b82f6;
        }

        .permission-stats {
            display: flex;
            gap: 18px;
            font-size: 13px;
            margin-top: 8px;
        }

        .granted-count {
            color: #059669;
            font-weight: 600;
            padding: 4px 8px;
            background: #d1fae5;
            border-radius: 6px;
        }

        .total-count {
            color: #6b7280;
            font-weight: 500;
        }

		.permission-grid {
		    flex: 1;
		    padding: 15px;  /* 减少内边距 */
		    overflow-y: auto;
		    display: grid;
		    gap: 8px;  /* 减少间距 */
		    min-height: 0;  /* 重要：允许flex子项缩小 */
		}
		
		.permission-grid::-webkit-scrollbar {
		    width: 6px;
		}
		
		.permission-grid::-webkit-scrollbar-track {
		    background: #f1f5f9;
		    border-radius: 3px;
		}
		
		.permission-grid::-webkit-scrollbar-thumb {
		    background: #cbd5e1;
		    border-radius: 3px;
		}

		/* 12. 修复权限项的显示 */
		.permission-item {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    padding: 12px 15px;  /* 减少内边距 */
		    background: #ffffff;
		    border: 1px solid #e5e7eb;
		    border-radius: 8px;  /* 减少圆角 */
		    transition: all 0.3s ease;
		    position: relative;
		    overflow: hidden;
		    margin-bottom: 6px;  /* 减少底部边距 */
		}

        .permission-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(45deg, #3b82f6, #60a5fa);
            transform: scaleY(0);
            transition: transform 0.3s ease;
        }

        .permission-item:hover::before {
            transform: scaleY(1);
        }

        .permission-item:hover {
            border-color: #3b82f6;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
            transform: translateX(5px);
        }

        .permission-name {
            flex: 1;
            font-weight: 500;
            color: #374151;
            font-size: 14px;
        }

        .permission-toggle {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .permission-checkbox {
            width: 22px;
            height: 22px;
            cursor: pointer;
            transform: scale(1.1);
            accent-color: #3b82f6;
        }

        .permission-status {
            padding: 6px 12px;
            border-radius: 14px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }

        .permission-status.granted {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
            color: #065f46;
            border: 1px solid #a7f3d0;
        }

        .permission-status.denied {
            background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
            color: #991b1b;
            border: 1px solid #fecaca;
        }

        /* 操作按钮样式 */
		/* 16. 操作按钮区域的优化 */
		.group-actions,
		.permission-actions {
		    padding: 15px 20px;  /* 减少内边距 */
		    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
		    border-top: 1px solid #e5e7eb;
		    display: flex;
		    gap: 12px;  /* 减少间距 */
		    justify-content: center;
		    flex-shrink: 0;  /* 防止按钮区域被压缩 */
		}

		.permission-actions {
		    justify-content: flex-end;
		}

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }

        .btn:hover::before {
            width: 100%;
            height: 100%;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .btn-primary {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .btn-primary:hover {
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
        }

        .btn-info {
            background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
        }

        .btn-warning {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
        }

        /* 用户权限管理样式 */
        .user-permission-management {
		    display: grid;
		    grid-template-columns: 300px 1fr;  /* 稍微减少左侧宽度 */
		    gap: 20px;
		    flex: 1;  /* 占用剩余空间 */
		    padding: 20px;
		    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
		    min-height: 0;  /* 重要：允许flex子项缩小 */
		}

        .user-selection-panel {
            background: #ffffff;
            border-radius: 16px;
            border: 1px solid #e5e7eb;
            display: flex;
            flex-direction: column;
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.08);
            overflow: hidden;
        }
        
        .permission-settings {
		    flex: 1;
		    min-height: 0;  /* 重要：允许flex子项缩小 */
		    overflow-y: auto;
		}
		
		#userPermissionSettings {
		    flex: 1;
		    min-height: 0;  /* 重要：允许flex子项缩小 */
		    overflow-y: auto;
		    padding: 15px;  /* 减少内边距 */
		}
						
		.user-selection-panel,
	       .permission-settings-panel {
		    background: #ffffff;
		    border-radius: 16px;
		    border: 1px solid #e5e7eb;
		    display: flex;
		    flex-direction: column;
		    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.08);
		    overflow: hidden;
		    min-height: 0;  /* 重要：允许flex子项缩小 */
		}

		.panel-header {
		    padding: 15px 20px;  /* 减少内边距 */
		    border-bottom: 1px solid #e5e7eb;
		    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
		    flex-shrink: 0;  /* 防止标题区域被压缩 */
		}

        .panel-header h4 {
            margin: 0 0 12px 0;
            color: #374151;
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* 加载和错误状态 */
		/* 15. 加载状态的优化 */
		.loading-placeholder {
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    align-items: center;
		    height: 100px;  /* 减少高度 */
		    color: #6b7280;
		    gap: 10px;  /* 减少间距 */
		    font-size: 13px;  /* 减小字体 */
		}

        .loading-placeholder i {
            font-size: 28px;
            color: #3b82f6;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* 14. 空状态提示的优化 */
		.empty-hint {
		    text-align: center;
		    color: #9ca3af;
		    font-style: italic;
		    padding: 30px 20px;  /* 减少内边距 */
		    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
		    border: 2px dashed #d1d5db;
		    border-radius: 8px;  /* 减少圆角 */
		    margin: 10px;  /* 减少外边距 */
		    font-size: 13px;  /* 减小字体 */
		}

        .error-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 150px;
            color: #6b7280;
            gap: 12px;
            text-align: center;
        }

        .error-state i {
            font-size: 36px;
            color: #ef4444;
        }

        /* 响应式设计 */
		/* 13. 响应式设计改进 */
		@media (max-width: 1200px) {
		    .permission-modal-content {
		        width: 95%;
		        height: 95vh;
		        margin: 1vh auto;
		    }
		    
		    .group-container,
		    .permission-comparison {
		        grid-template-columns: 1fr;
		        gap: 15px;
		    }
		    
		    .user-permission-management {
		        grid-template-columns: 1fr;
		        gap: 15px;
		    }
		}
		
		@media (max-width: 768px) {
		    .permission-modal-content {
		        width: 98%;
		        height: 98vh;
		        margin: 1vh auto;
		    }
		    
		    .group-container {
		        min-height: auto;
		    }
		    
		    .user-list {
		        min-height: 200px;
		    }
		    
		    .permission-tabs .permission-tab {
		        padding: 10px 15px;  /* 减少内边距 */
		        font-size: 12px;  /* 减小字体 */
		    }
		    
		    .user-group-management,
		    .permission-comparison,
		    .user-permission-management {
		        padding: 15px;  /* 减少内边距 */
		    }
		}

        /* 动画效果 */
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .tab-content.active {
            animation: slideInUp 0.4s ease;
        }

        .user-item {
            animation: fadeInScale 0.3s ease;
        }

        .permission-item {
            animation: slideInUp 0.3s ease;
        }
        
        /* 权限管理专用样式增强版 */
	/* 20. 修复权限管理标签页特殊样式 */
	.permission-tabs-wrapper {
	    display: flex;
	    flex-direction: column;
	    height: 100%;
	}

.permission-tabs {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
    border-radius: 12px 12px 0 0;
    padding: 0;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-shrink: 0;  /* 防止标签被压缩 */
}

.permission-tabs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(180deg); }
}

.permission-tab {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: none;
    padding: 16px 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    font-weight: 500;
    flex: 1;
    text-align: center;
}

.permission-tab::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffffff, #bfdbfe);
    transition: width 0.3s ease;
}

.permission-tab::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.permission-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transform: translateY(-2px);
}

.permission-tab:hover::after {
    opacity: 1;
}

.permission-tab.active {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.permission-tab.active::before {
    width: 100%;
}

.permission-tab i {
    margin-right: 10px;
    font-size: 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* 权限标签内容区域 */
.permission-tab-content {
    display: none;
    flex: 1;
    padding: 20px;  /* 减少内边距 */
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    animation: fadeInUp 0.4s ease;
    min-height: 0;  /* 重要：允许flex子项缩小 */
    overflow: hidden;
}

.permission-tab-content.active {
    display: flex;
    flex-direction: column;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 10. 修复用户列表面板 */
.user-list-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;  /* 重要：允许flex子项缩小 */
}

.user-list-panel h4 {
    margin: 15px 0 10px 0;  /* 减少边距 */
    color: #374151;
    font-size: 14px;  /* 减小字体 */
    font-weight: 600;
}

.search-box {
    position: relative;
    margin-bottom: 10px;  /* 减少底部边距 */
    flex-shrink: 0;  /* 防止搜索框被压缩 */
}

/* 9. 修复用户类型选择器 */
.user-type-selector {
    display: flex;
    gap: 15px;  /* 减少间距 */
    margin-bottom: 15px;  /* 减少底部边距 */
    padding: 12px;  /* 减少内边距 */
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;  /* 防止被压缩 */
}

.radio-option {
    flex: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.radio-option input[type="radio"] {
    display: none;
}

.radio-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    transition: all 0.3s ease;
    text-align: center;
}

.radio-option input[type="radio"]:checked + .radio-custom {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.radio-custom i {
    font-size: 24px;
    margin-bottom: 8px;
    color: #6b7280;
    transition: color 0.3s ease;
}

.radio-option input[type="radio"]:checked + .radio-custom i {
    color: #3b82f6;
}

.radio-custom span {
    font-weight: 600;
    font-size: 14px;
}

/* 搜索框样式 */
.search-box {
    position: relative;
    margin-bottom: 15px;
}

.search-box input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.search-box input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.search-box i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

/* 无用户选中状态 */
.no-user-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #6b7280;
    text-align: center;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border: 2px dashed #d1d5db;
    border-radius: 12px;
}

.no-user-selected i {
    font-size: 48px;
    margin-bottom: 16px;
    color: #9ca3af;
}

.no-user-selected p {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.no-user-selected small {
    font-size: 14px;
    color: #9ca3af;
}

/* 权限项样式增强 */
.permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
}

.permission-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(45deg, #3b82f6, #60a5fa);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.permission-item:hover::before {
    transform: scaleY(1);
}

.permission-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
    transform: translateX(5px);
}

.permission-name {
    flex: 1;
    font-weight: 600;
    color: #374151;
    font-size: 15px;
}

.permission-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
}

.permission-checkbox {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transform: scale(1.2);
    accent-color: #3b82f6;
}

.permission-status {
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
    min-width: 80px;
    text-align: center;
}

.permission-status.granted {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.permission-status.denied {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .permission-modal-content {
        width: 95%;
        height: 90vh;
    }
    
    .permission-comparison,
    .user-permission-management {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .permission-tabs {
        flex-direction: column;
    }
    
    .permission-tab {
        padding: 12px 18px;
        font-size: 13px;
    }
    
    .permission-tab i {
        font-size: 16px;
    }
    
    .user-type-selector {
        flex-direction: column;
        gap: 12px;
    }
}

/* 权限禁用状态样式 */
/* 18. 修复权限禁用状态的样式 */
.permission-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    filter: grayscale(70%) !important;
    transition: all 0.3s ease;
    pointer-events: auto !important;
}

.permission-disabled:hover {
    opacity: 0.3 !important;
    transform: none !important;
}

.permission-disabled:active {
    transform: none !important;
    box-shadow: none !important;
}

/* 权限提示样式增强 */
.message.error {
    white-space: pre-line; /* 支持换行显示 */
    max-width: 400px;
    line-height: 1.5;
}

.admin-buttons.permission-disabled {
    opacity: 0.5;
    filter: grayscale(70%);
}

.admin-buttons.permission-disabled button {
    cursor: not-allowed;
}

/* 19. 确保按钮的点击区域正确 */
button:not(.permission-disabled) {
    pointer-events: auto;
    cursor: pointer;
}

button.permission-disabled {
    pointer-events: auto;  /* 允许点击以显示权限提示 */
    cursor: not-allowed;
}

/* ==================== 添加到 Main.jsp 的 <style> 标签末尾 ==================== */

/* 简洁共享名片样式 */
.shared-card-clean {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    padding: 16px;
    width: 200px;
    height: 140px;
    margin: 8px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.shared-card-clean:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    border-left-color: #2563eb;
}

/* 名片头部 */
.card-header-clean {
    margin-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
}

.card-name-clean {
    font-size: 16px;
    font-weight: bold;
    color: #1f2937;
    margin: 0;
    line-height: 1.2;
    text-align: center;
}

/* 名片信息区域 */
.card-info-clean {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-line {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
}

.info-label {
    font-weight: 500;
    color: #6b7280;
    min-width: 40px;
    flex-shrink: 0;
}

.info-value {
    color: #374151;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 4px;
}

/* 空值的特殊处理 */
.info-value:empty::after {
    content: '—';
    color: #d1d5db;
}

/* 表格行样式 */
.shared-card-row-clean {
    border-left: 4px solid #3b82f6;
    transition: all 0.3s ease;
    background: rgba(59, 130, 246, 0.02);
}

.shared-card-row-clean:hover {
    background: rgba(59, 130, 246, 0.05);
    transform: translateX(2px);
}

.shared-card-row-clean td:nth-child(2) {
    font-weight: 600;
    color: #1f2937;
}

/* 只读文本样式 */
.read-only-text {
    color: #f59e0b;
    font-size: 11px;
    font-weight: 600;
    background: #fef3c7;
    padding: 2px 6px;
    border-radius: 8px;
    margin-right: 8px;
}

/* 简化的共享模式通知栏 */
.shared-mode-notice-clean {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 1px solid #3b82f6 !important;
    border-left: 4px solid #3b82f6 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    color: #1e40af !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1) !important;
    animation: slideInDown 0.5s ease !important;
}

.shared-mode-notice-clean i {
    font-size: 16px;
    color: #3b82f6;
    margin-right: 10px;
}

/* 权限徽章（头部） */
.permission-badge-header {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.permission-badge-header.read-only {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.3);
}

.permission-badge-header.editable {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.3);
}

/* 网格布局优化 */
.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 16px 0;
}


/* 模态框容器调整 */
#cardDetailsModal.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    overflow: auto;
    padding: 0;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

/* 当模态框显示时使用flex布局 */
#cardDetailsModal.modal[style*="block"] {
    display: flex !important;
}

.detail-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 20px 24px;
    text-align: center;
    border-radius: 12px 12px 0 0;
    margin: 0;
    position: relative;
    flex-shrink: 0; /* 防止头部被压缩 */
}

.detail-name {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detail-basic {
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0.9;
}

.detail-org {
    font-size: 15px;
    font-weight: 500;
}

.detail-title {
    font-size: 13px;
    opacity: 0.8;
}

.detail-info {
    padding: 20px 24px;
    overflow-y: auto; /* 允许内容滚动 */
    flex: 1; /* 占用剩余空间 */
}

/* 优化滚动条样式 */
.detail-info::-webkit-scrollbar {
    width: 6px;
}

.detail-info::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.detail-info::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.detail-info::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


.detail-section {
    margin-bottom: 20px;
}

.detail-section:last-child {
    margin-bottom: 0;
}

.detail-section h4 {
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-section h4 i {
    color: #3b82f6;
    font-size: 13px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.detail-item {
    background: #f9fafb;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 3px solid #e5e7eb;
    transition: all 0.3s ease;
}

.detail-item:hover {
    background: #f3f4f6;
    border-left-color: #3b82f6;
}

.detail-item.full-width {
    grid-column: 1 / -1;
}

.detail-label {
    display: block;
    font-weight: 600;
    color: #6b7280;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.detail-value {
    display: block;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    word-break: break-all;
}

.detail-value:empty::after {
    content: '未填写';
    color: #9ca3af;
    font-style: italic;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .card-list {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
    }
    
    .shared-card-clean {
        width: 100%;
        height: 130px;
        padding: 14px;
    }
}

@media (max-width: 768px) {
    .card-list {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;
    }
    
    .shared-card-clean {
        height: 120px;
        padding: 12px;
    }
    
    .card-name-clean {
        font-size: 15px;
    }
    
    .info-line {
        font-size: 11px;
        gap: 4px;
    }
    
    .info-label {
        min-width: 35px;
    }
    
    .detail-header {
        padding: 20px 16px;
    }
    
    .detail-name {
        font-size: 24px;
    }
    
    .detail-org {
        font-size: 14px;
    }
    
    .detail-title {
        font-size: 12px;
    }
    
    .detail-info {
        padding: 0 16px 20px;
    }
    
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .detail-item {
        padding: 10px 12px;
    }
    
    .detail-section h4 {
        font-size: 14px;
    }
}

/* 动画效果 */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 微妙的悬停效果 */
.shared-card-clean::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.05) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.shared-card-clean:hover::before {
    opacity: 1;
}

/* 确保文本不会溢出 */
.shared-card-clean * {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 模态框动画 */
#cardDetailsModal {
    animation: modalFadeIn 0.3s ease;
}

#cardDetailsModal .modal-content {
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 表单按钮增强 */
.form-actions {
    padding: 20px 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    margin: 0 -20px -20px -20px;
}

.form-actions .btn {
    min-width: 120px;
    padding: 10px 20px;
    font-weight: 600;
}

/* 美化滚动条 */
.card-list::-webkit-scrollbar,
.card-detail-clean::-webkit-scrollbar {
    width: 6px;
}

.card-list::-webkit-scrollbar-track,
.card-detail-clean::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.card-list::-webkit-scrollbar-thumb,
.card-detail-clean::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.card-list::-webkit-scrollbar-thumb:hover,
.card-detail-clean::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 增强版共享名片容器 */
.shared-card-enhanced {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: none;
    border-radius: 12px;
    padding: 0;
    width: 280px;
    height: 180px;
    margin: 12px;
    display: block;
    transition: all 0.4s ease;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.shared-card-enhanced:hover {
    transform: translateY(-8px) rotateX(5deg);
    box-shadow: 
        0 20px 40px rgba(59, 130, 246, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 名片主容器 */
.business-card-container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 50%, #f0f4f8 100%);
    border-radius: 12px;
    overflow: hidden;
}

/* 头部装饰条 */
.card-header-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8, #6366f1);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

/* 公司/机构信息区域 */
.company-section {
    margin-bottom: 16px;
    position: relative;
}

.company-name {
    font-size: 12px;
    font-weight: 700;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
    margin-bottom: 6px;
    opacity: 0.9;
}

.company-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, #3b82f6, transparent);
    margin-bottom: 0;
}

/* 个人信息主区域 */
.personal-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 姓名和职务区域 */
.name-title-area {
    margin-bottom: 14px;
}

.person-name {
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 6px 0;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.person-title {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
}

/* 联系信息区域 */
.contact-section {
    margin-top: auto;
}

.contact-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.contact-row:last-child {
    margin-bottom: 0;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    position: relative;
}

.contact-item.address-item {
    flex-wrap: wrap;
}

.contact-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-size: 12px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-radius: 50%;
    padding: 4px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
}

.contact-text {
    font-size: 11px;
    color: #374151;
    font-weight: 500;
    line-height: 1.3;
    word-break: break-all;
    flex: 1;
}

.address-item .contact-text {
    font-size: 10px;
    line-height: 1.4;
    color: #6b7280;
}

/* 权限指示器 */
.permission-indicator-corner {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    opacity: 0.9;
}

.permission-indicator-corner .fa-eye {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}


/* 底部装饰 */
.card-footer-decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    opacity: 0.6;
}

/* 空值处理 */
.contact-text:empty::before {
    content: '未提供';
    color: #d1d5db;
    font-style: italic;
}

/* 悬停效果增强 */
.shared-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 12px;
}

.shared-card-enhanced:hover::before {
    opacity: 1;
}

/* 3D 效果增强 */
.shared-card-enhanced::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    pointer-events: none;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .card-list {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
    }
    
    .shared-card-enhanced {
        width: 260px;
        height: 170px;
    }
    
    .business-card-container {
        padding: 18px;
    }
    
    .person-name {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .card-list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
        padding: 16px 0;
    }
    
    .shared-card-enhanced {
        width: 240px;
        height: 160px;
        margin: 8px;
    }
    
    .business-card-container {
        padding: 16px;
    }
    
    .person-name {
        font-size: 18px;
    }
    
    .company-name {
        font-size: 11px;
    }
    
    .person-title {
        font-size: 12px;
        padding: 3px 10px;
    }
    
    .contact-text {
        font-size: 10px;
    }
    
    .contact-icon {
        width: 14px;
        height: 14px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .card-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .shared-card-enhanced {
        width: 100%;
        max-width: 280px;
        height: 150px;
    }
    
    .business-card-container {
        padding: 14px;
    }
    
    .person-name {
        font-size: 16px;
    }
    
    .contact-row {
        gap: 6px;
    }
    
    .contact-item {
        gap: 8px;
        padding: 4px 0;
    }
}

/* 动画效果 */
@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(20px) rotateX(-10deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

.shared-card-enhanced {
    animation: cardEntrance 0.6s ease-out;
}

/* 微交互效果 */
.shared-card-enhanced:active {
    transform: translateY(-4px) scale(0.98);
    transition: transform 0.1s ease;
}

/* 光泽效果 */
.business-card-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: transform 0.8s ease;
    opacity: 0;
}

.shared-card-enhanced:hover .business-card-container::before {
    opacity: 1;
    transform: rotate(45deg) translate(20%, 20%);
}

/* 确保文本清晰度 */
.shared-card-enhanced * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==================== 修复后的名片夹样式 ==================== */
        .card-folders {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }

.card-folder {
            background-color: #ffeb3b;
            border-radius: 8px 8px 0 0;
            width: 150px;
            height: 30px;
            position: relative;
            margin-top: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            font-weight: bold;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }
        
        .card-folder:after {
            content: '';
            position: absolute;
            top: 0;
            right: -15px;
            width: 30px;
            height: 30px;
            background-color: #ffeb3b;
            border-radius: 0 8px 0 0;
            z-index: -1;
        }
        
        .card-folder:before {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 150px;
            height: 10px;
            background-color: #f2d900;
            border-radius: 0 0 8px 8px;
        }
        
        .card-folder:hover {
            transform: translateY(-5px) rotate(2deg);
        }
        
        .card-folder-add {
            background-color: #e0e0e0;
            border-radius: 8px;
            width: 150px;
            height: 30px;
            margin-top: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #555;
            font-weight: bold;
            border: 2px dashed #aaa;
        }
        
        .card-folder-add:hover {
            background-color: #d4d4d4;
            transform: translateY(-3px);
        }

/* 激活状态简化 */
.card-folder.active {
    transform: translateY(-2px) scale(1.01);
    filter: drop-shadow(0 6px 14px rgba(255, 193, 7, 0.25));
}

.card-folder.active::before {
    background: linear-gradient(135deg, #fdd835 0%, #f9a825 50%, #f57f17 100%);
    box-shadow: 
        0 6px 16px rgba(249, 168, 37, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* 简化的文件夹入场动画 */
@keyframes folderFloat {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 新建文件夹按钮 */
.card-folder-add {
    position: relative;
    width: 150px;
    height: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px dashed #bbb;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(187, 187, 187, 0.08) 0%, rgba(187, 187, 187, 0.04) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-weight: 600;
    font-size: 12px;
    margin: 0 8px 25px 8px;
}

.card-folder-add:hover {
    border-color: #ffb300;
    color: #ff8f00;
    background: linear-gradient(135deg, rgba(255, 179, 0, 0.08) 0%, rgba(255, 179, 0, 0.04) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 179, 0, 0.15);
}


/* ==================== 优化的名片样式（移除模糊效果） ==================== */
/* ==================== 修复后的名片样式 ==================== */
.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* 调整为240px，一行4个 */
    gap: 16px; /* 减少间距 */
    padding: 16px 0;
}

.card-item {
    position: relative;
    width: 100%;
    max-width: 240px; /* 限制最大宽度 */
    height: 160px; /* 减少高度 */
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
    border-radius: 10px; /* 稍微减少圆角 */
    cursor: pointer;
    transition: all 0.25s ease; /* 缩短过渡时间 */
    animation: cardEntrance 0.4s ease-out; /* 缩短入场动画时间 */
    box-shadow: 
        0 3px 12px rgba(59, 130, 246, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(59, 130, 246, 0.08);
    overflow: hidden;
    margin: 0 auto;
}

/* 简化的名片入场动画 */
@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 名片顶部装饰条 */
.card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
    z-index: 1;
}

/* 简化的悬停效果 */
.card-item:hover {
    transform: translateY(-4px) scale(1.01); /* 减少变换幅度 */
    box-shadow: 
        0 8px 20px rgba(59, 130, 246, 0.1),
        0 3px 8px rgba(0, 0, 0, 0.06);
    border-color: rgba(59, 130, 246, 0.15);
}

/* 移除过于复杂的悬停动画 */
.card-item:hover {
    /* 使用简单的transform而不是复杂的animation */
    animation: none;
}

/* 名片内容样式优化 */
.card-item h3 {
    font-size: 18px; /* 稍微减少字体大小 */
    font-weight: 700;
    color: #1e40af;
    margin: 16px 16px 6px 16px; /* 调整边距 */
    text-shadow: 0 1px 2px rgba(30, 64, 175, 0.08);
    line-height: 1.2;
    position: relative;
    z-index: 2;
    border-bottom: 1px solid rgba(59, 130, 246, 0.08);
    padding-bottom: 6px;
}

.card-item p {
    margin: 4px 16px; /* 减少边距 */
    font-size: 11px; /* 稍微减少字体大小 */
    color: #374151;
    font-weight: 500;
    line-height: 1.3;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 1px 0;
}

/* 机构名称样式调整 */
.card-item p:first-of-type {
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
    margin-top: 6px;
    padding: 5px 10px;
    background: rgba(59, 130, 246, 0.04);
    border-radius: 5px;
    border-left: 3px solid #3b82f6;
    margin-left: 16px;
    margin-right: 16px;
    width: calc(100% - 32px);
}

/* 移除复杂的背景装饰动画 */
.card-item::after {
    display: none; /* 简化设计，移除背景装饰 */
}

/* 名片操作按钮优化 */
.card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transform: translateY(-6px);
    transition: all 0.25s ease;
    z-index: 10;
}

.card-item:hover .card-actions {
    opacity: 1;
    transform: translateY(0);
}

.card-actions button {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.95);
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    font-size: 11px;
}

.card-actions button:hover {
    background: #3b82f6;
    color: white;
    transform: scale(1.08);
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.25);
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .card-list {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 14px;
    }
    
    .card-item {
        max-width: 220px;
        height: 150px;
    }
}

@media (max-width: 768px) {
    .card-list {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
        padding: 12px 0;
    }
    
    .card-item {
        max-width: 200px;
        height: 140px;
    }
    
    .card-item h3 {
        font-size: 16px;
        margin: 14px 14px 5px 14px;
    }
    
    .card-item p {
        margin: 3px 14px;
        font-size: 10px;
    }
    
    .card-folders {
        gap: 12px;
    }
    
    .card-folder,
    .card-folder-add {
        width: 130px;
        height: 30px;
        margin: 0 6px 20px 6px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .card-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .card-item {
        width: 100%;
        max-width: 100%;
        height: 130px;
    }
}

/* 共享名片夹样式（黄色主题） */
.shared-folder {
    background: linear-gradient(135deg, #ff9800, #f57c00) !important;
    color: #333 !important;
    border: 2px solid #e65100 !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3) !important;
    transform: translateY(-2px);
}

.shared-folder::before {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 50%, #e65100 100%) !important;
}

.shared-folder::after {
    background: linear-gradient(135deg, #ffb74d 0%, #ff9800 100%) !important;
}

.shared-folder:hover {
    transform: translateY(-8px) rotateX(12deg) rotateY(-3deg) scale(1.05) !important;
    box-shadow: 0 8px 25px rgba(255, 152, 0, 0.4) !important;
}

/* ==================== 表格视图优化 ==================== */
.table-view {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.1);
}

.table-view th {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border: none;
    padding: 14px 10px;
    font-size: 13px;
}

.table-view td {
    border-bottom: 1px solid rgba(59, 130, 246, 0.08);
    padding: 12px 10px;
    transition: all 0.2s ease;
    font-size: 12px;
}

.table-view tr:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(59, 130, 246, 0.02) 100%);
    transform: translateX(1px);
}

.table-view tr:nth-child(even) {
    background: rgba(59, 130, 246, 0.01);
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 768px) {
    .card-folders {
        justify-content: center;
        gap: 12px;
    }

    .card-folder,
    .card-folder-add {
        width: 130px;
        height: 32px;
        margin: 0 6px 25px 6px;
        font-size: 12px;
    }

    .card-list {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 15px 0;
    }

    .card-item {
        width: 100%;
        max-width: 100%;
        height: 170px;
    }

    .card-item h3 {
        font-size: 18px;
        margin: 16px 16px 6px 16px;
    }

    .card-item p {
        margin: 4px 16px;
        font-size: 11px;
    }

    .card-item p:first-of-type {
        font-size: 13px;
        margin-left: 16px;
        margin-right: 16px;
        width: calc(100% - 32px);
    }
}

@media (max-width: 480px) {
    .card-folder,
    .card-folder-add {
        width: 110px;
        height: 30px;
        font-size: 11px;
    }

    .card-folder i,
    .card-folder-add i {
        font-size: 12px;
        margin-right: 4px;
    }

    .card-item {
        height: 160px;
    }

    .card-item h3 {
        font-size: 16px;
        margin: 14px 14px 6px 14px;
    }

    .card-item p {
        margin: 3px 14px;
        font-size: 10px;
    }

    .card-actions {
        top: 10px;
        right: 10px;
        gap: 4px;
    }

    .card-actions button {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
}

/* ==================== 特殊动画效果 ==================== */
@keyframes folderClick {
    0% { transform: translateY(-4px) rotateX(8deg) scale(1.02); }
    50% { transform: translateY(-6px) rotateX(12deg) scale(1.04); }
    100% { transform: translateY(-4px) rotateX(8deg) scale(1.02); }
}

@keyframes cardGentleHover {
    0%, 100% { 
        transform: translateY(0) scale(1);
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
    }
    50% { 
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 8px 28px rgba(59, 130, 246, 0.12);
    }
}

/* 去除模糊效果，使用gentle hover替代 */
.card-item:hover {
    animation: cardGentleHover 0.6s ease-in-out;
}

/* 文件夹入场动画延迟 */
.card-folder:nth-child(1) { animation-delay: 0s; }
.card-folder:nth-child(2) { animation-delay: 0.1s; }
.card-folder:nth-child(3) { animation-delay: 0.2s; }
.card-folder:nth-child(4) { animation-delay: 0.3s; }
.card-folder:nth-child(5) { animation-delay: 0.4s; }

/* 名片入场动画延迟 */
.card-item:nth-child(1) { animation-delay: 0.2s; }
.card-item:nth-child(2) { animation-delay: 0.4s; }
.card-item:nth-child(3) { animation-delay: 0.6s; }
.card-item:nth-child(4) { animation-delay: 0.8s; }
.card-item:nth-child(5) { animation-delay: 1.0s; }



.detail-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 24px;
    text-align: center;
    border-radius: 8px 8px 0 0;
    margin: -20px -20px 20px -20px;
    position: relative;
}


.detail-header .close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: color 0.3s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.detail-header .close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.detail-name {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 12px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detail-basic {
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0.9;
}

.detail-org {
    font-size: 16px;
    font-weight: 500;
}

.detail-title {
    font-size: 14px;
    opacity: 0.8;
}

.detail-info {
    padding: 0 24px 24px;
}

.detail-section {
    margin-bottom: 24px;
}

.detail-section:last-child {
    margin-bottom: 0;
}

.detail-section h4 {
    color: #374151;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-section h4 i {
    color: #3b82f6;
    font-size: 14px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.detail-item {
    background: #f9fafb;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid #e5e7eb;
    transition: all 0.3s ease;
}

.detail-item:hover {
    background: #f3f4f6;
    border-left-color: #3b82f6;
}

.detail-item.full-width {
    grid-column: 1 / -1;
}

.detail-label {
    display: block;
    font-weight: 600;
    color: #6b7280;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.detail-value {
    display: block;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    word-break: break-all;
}

.detail-value:empty::after {
    content: '未填写';
    color: #9ca3af;
    font-style: italic;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .detail-header {
        padding: 20px 16px;
    }
    
    .detail-name {
        font-size: 24px;
    }
    
    .detail-org {
        font-size: 14px;
    }
    
    .detail-title {
        font-size: 12px;
    }
    
    .detail-info {
        padding: 0 16px 20px;
    }
    
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .detail-item {
        padding: 10px 12px;
    }
    
    .detail-section h4 {
        font-size: 14px;
    }
}

/* 模态框动画 */
#cardDetailsModal {
    animation: modalFadeIn 0.3s ease;
}

#cardDetailsModal .modal-content {
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 表单按钮增强 */
.form-actions {
    padding: 20px 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    margin: 0 -20px -20px -20px;
}

.form-actions .btn {
    min-width: 120px;
    padding: 10px 20px;
    font-weight: 600;
}
		
    </style>
</head>
<body>
    <div id="particles-js"></div>
    <div id="loader" class="loader">
        <div class="loader-content"></div>
    </div>
    
    <div class="container">
        <header>
            <h1 id="mainHeader"><%= username %>维护的名片册</h1>
            <div class="user-info">
                <span><i class="fas fa-user"></i> <%= username %></span>
                <button class="btn btn-secondary" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> 退出</button>
            </div>
        </header>
        
        <div class="menu-bar">
            <!-- 新增按钮和下拉菜单 -->
            <div class="dropdown-btn">
                <button id="newBtn"><i class="fas fa-plus"></i> 新增 <i class="fas fa-chevron-down dropdown-icon"></i></button>
                <div class="dropdown-menu" id="newDropdown">
                    <a href="#" id="addCardOne">逐片新增</a>
                    <a href="#" id="addCardBatch">批量新增</a>
                    <a href="#" id="importCardBatch">批量导入</a>
                </div>
            </div>
            
            <!-- 查找按钮和下拉菜单 -->
            <div class="dropdown-btn">
                <button id="searchBtn"><i class="fas fa-search"></i> 查找 <i class="fas fa-chevron-down dropdown-icon"></i></button>
                <div class="dropdown-menu" id="searchDropdown">
                    <a href="#" id="searchMenu">查找</a>
                    <a href="#" id="replaceMenu">替换</a>
                </div>
            </div>
            
            <!-- 共享按钮和下拉菜单 -->
            <div class="dropdown-btn">
                <button id="shareBtn"><i class="fas fa-share-alt"></i> 共享 <i class="fas fa-chevron-down dropdown-icon"></i></button>
                <div class="dropdown-menu" id="shareDropdown">
                    <a href="#" id="shareCard">名片共享</a>
                    <a href="#" id="shareFolder">名片夹共享</a>
                    <a href="#" id="manageShares">管理共享</a>
                    <a href="#" id="viewSharedWithMe">共享给我</a>
                    <a href="#" id="exportFile">导出</a>
                </div>
            </div>
            
            <button id="printBtn"><i class="fas fa-print"></i> 打印</button>
            <button id="recycleBtn"><i class="fas fa-trash"></i> 回收箱</button>
            
            <!-- 权限和账户按钮（管理员功能） -->
            <div class="admin-buttons">
                <button id="permissionsBtn"><i class="fas fa-user-shield"></i> 权限</button>
                <button id="accountsBtn"><i class="fas fa-users-cog"></i> 账户</button>
            </div>
        </div>
        
        <div class="content-area">
            <div class="card-folders" id="cardFolders">
                <!-- 名片夹将通过AJAX加载 -->
                <div class="card-folder-add" id="addFolderBtn">
                    <i class="fas fa-folder-plus"></i> 新建名片夹
                </div>
            </div>
            
            <div class="tab-container">
                <div class="tab active" data-tab="cardView">卡片视图</div>
                <div class="tab" data-tab="listView">列表视图</div>
            </div>
            
            <div class="tab-content active" id="cardView">
                <div class="card-list" id="cardList">
                    <!-- 卡片视图会在这里动态生成 -->
                </div>
            </div>
            
            <div class="tab-content" id="listView">
                <table class="table-view">
                    <thead>
                        <tr>
                            <th><input type="checkbox" class="checkbox" id="selectAll"></th>
                            <th>姓名</th>
                            <th>机构名称</th>
                            <th>职务</th>
                            <th>电话</th>
                            <th>邮箱</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="cardTableBody">
                        <!-- 表格视图会在这里动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- 名片详情预览模态框 -->
<div id="cardDetailsModal" class="modal">
    <div class="modal-content card-detail-clean">
        <!-- 名片详情头部 -->
        <div class="detail-header">
            <div class="detail-basic">
                <h2 class="detail-name" id="detailName">姓名</h2>
                <div class="detail-org" id="detailOrg">机构名称</div>
                <div class="detail-title" id="detailJobTitle">职务</div>
            </div>
            <span class="close" onclick="hideModal('cardDetailsModal')">&times;</span>
        </div>
        
        <!-- 名片详情内容 -->
        <div class="detail-info">
            <!-- 基本信息部分 -->
            <div class="detail-section">
                <h4><i class="fas fa-user"></i> 基本信息</h4>
                <div class="detail-grid">
                    <div class="detail-item">
                        <span class="detail-label">性别</span>
                        <span class="detail-value" id="detailGender">未填写</span>
                    </div>
                </div>
            </div>
            
            <!-- 联系方式部分 -->
            <div class="detail-section">
                <h4><i class="fas fa-address-book"></i> 联系方式</h4>
                <div class="detail-grid">
                    <div class="detail-item">
                        <span class="detail-label">电话</span>
                        <span class="detail-value" id="detailPhone">未填写</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">邮箱</span>
                        <span class="detail-value" id="detailEmail">未填写</span>
                    </div>
                </div>
            </div>
            
            <!-- 地址信息部分 -->
            <div class="detail-section">
                <h4><i class="fas fa-map-marker-alt"></i> 地址信息</h4>
                <div class="detail-grid">
                    <div class="detail-item full-width">
                        <span class="detail-label">机构地址</span>
                        <span class="detail-value" id="detailAddress">未填写</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部按钮 -->
        <div class="form-actions">
            <button type="button" class="btn btn-primary" onclick="hideModal('cardDetailsModal')">
                <i class="fas fa-check"></i> 确定
            </button>
        </div>
    </div>
</div>
    
    <!-- 新增名片模态框 -->
    <div id="addCardModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>新增名片</h2>
                <span class="close">&times;</span>
            </div>
            <form id="addCardForm">
                <div class="form-group">
                    <label for="cardName">姓名</label>
                    <input type="text" id="cardName" name="name" required>
                </div>
                <div class="form-group">
                    <label for="cardOrg">机构名称</label>
                    <input type="text" id="cardOrg" name="organization">
                </div>
                <div class="form-group">
                    <label for="cardTitle">职务</label>
                    <input type="text" id="cardTitle" name="title">
                </div>
                <div class="form-group">
                    <label for="cardGender">性别</label>
                    <select id="cardGender" name="gender">
                        <option value="">请选择</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="cardPhone">电话</label>
                    <input type="tel" id="cardPhone" name="phone">
                </div>
                <div class="form-group">
                    <label for="cardEmail">邮箱</label>
                    <input type="email" id="cardEmail" name="email">
                </div>
                <div class="form-group">
                    <label for="cardAddress">机构地址</label>
                    <input type="text" id="cardAddress" name="address">
                </div>
                <div class="form-group">
                    <label for="cardFolder">名片夹</label>
                    <select id="cardFolder" name="folder_id">
                        <!-- 名片夹选项将通过AJAX加载 -->
                    </select>
                </div>
                <input type="hidden" id="cardId" name="cardId">
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" id="cancelAddCard">取消</button>
                    <button type="submit" class="btn btn-primary">确定</button>
                </div>
            </form>
        </div>
    </div>
    
    <!--                                                                   新增部分      -->
    <!-- 批量新增名片模态框 -->
	<div id="batchAddModal" class="modal">
	    <div class="modal-content2">
	        <form id="batchAddForm">
	            <div class="modal-header">
	                <h2>批量新增名片</h2>
	                <span class="close">&times;</span>
	            </div>
	
	            <div class="form-group">
	                <label for="batchCardFolder">名片夹</label>
	                <select id="batchCardFolder" name="folder_id" required title="请选择名片夹">
	                    <!-- 名片夹选项通过 AJAX 加载 -->
	                </select>
	            </div>
	
	            <table class="table-view">
	                <thead>
	                    <tr>
	                        <th>姓名</th>
	                        <th>机构名称</th>
	                        <th>职务</th>
	                        <th>性别</th>
	                        <th>电话</th>
	                        <th>邮箱</th>
	                        <th>机构地址</th>
	                    </tr>
	                </thead>
	                <tbody id="batchTableBody" class="batchTableBody"></tbody>
	            </table>
	
	            <!-- 模板行 -->
				<!-- 修改后的批量新增模板行 -->
				<template id="batchRowTemplate">
				    <tr>
				        <td><input type="text" name="name" placeholder="姓名" required minlength="2" maxlength="10" title="请输入姓名（2~10个字）" /></td>
				        <td><input type="text" name="organization" placeholder="机构名称" required title="请输入机构名称" /></td>
				        <td><input type="text" name="title" placeholder="职务" required title="请输入职务" /></td>
				        <td>
				            <select name="gender" required title="请选择性别">
				                <option value="">选择</option>
				                <option value="男">男</option>
				                <option value="女">女</option>
				            </select>
				        </td>
				        <td><input type="tel" name="phone" placeholder="电话" required pattern="^1[3-9]\d{9}$" title="请输入有效的手机号" /></td>
				        <td><input type="email" name="email" placeholder="邮箱" required title="请输入有效的邮箱地址" /></td>
				        <td><input type="text" name="address" placeholder="机构地址" required title="请输入机构地址" /></td>
				    </tr>
				</template>
	
	            <button type="button" class="btn btn-secondary" id="addBatchRowBtn" style="margin-top: 10px;">
	                <i class="fas fa-plus"></i> 添加行
	            </button>
	
	            <div class="form-actions">
	                <button type="button" class="btn btn-secondary" id="cancelBatchAdd">取消</button>
	                <button type="submit" class="btn btn-primary">确定</button>
	            </div>
	        </form>
	    </div>
	</div>
	<!--                                                                   新增部分      -->
    
    <!-- 导入名片模态框 - 完整版 -->
<div id="importModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2><i class="fas fa-file-import"></i> 批量导入名片</h2>
            <span class="close">&times;</span>
        </div>
        <form id="importForm" enctype="multipart/form-data">
            <div class="form-group">
                <label for="importFolder">选择目标名片夹</label>
                <select id="importFolder" name="folderId" required>
                    <!-- 名片夹选项将通过AJAX加载 -->
                </select>
            </div>
            
            <div class="form-group">
                <label for="importFile">选择文件</label>
                <input type="file" id="importFile" name="importFile" accept=".csv,.xls,.xlsx" required>
                <small class="file-hint">
                    <i class="fas fa-info-circle"></i>
                    支持Excel (.xls, .xlsx) 和 CSV (.csv) 格式，单次最多导入100条记录
                </small>
            </div>
            
            <!-- 文件格式说明 -->
            <div class="form-group format-guide">
                <label><i class="fas fa-question-circle"></i> 文件格式要求</label>
                <div class="format-content">
                    <h4>支持的列名（推荐使用中文）：</h4>
                    <div class="field-mapping">
                        <div class="field-item">
                            <span class="field-primary">姓名</span>
                            <span class="field-required">必填</span>
                            <span class="field-alias">别名: name</span>
                        </div>
                        <div class="field-item">
                            <span class="field-primary">机构名称</span>
                            <span class="field-optional">可选</span>
                            <span class="field-alias">别名: 机构, 公司, 单位, organization</span>
                        </div>
                        <div class="field-item">
                            <span class="field-primary">职务</span>
                            <span class="field-optional">可选</span>
                            <span class="field-alias">别名: 职位, 岗位, title</span>
                        </div>
                        <div class="field-item">
                            <span class="field-primary">性别</span>
                            <span class="field-optional">可选</span>
                            <span class="field-alias">别名: gender</span>
                        </div>
                        <div class="field-item">
                            <span class="field-primary">电话</span>
                            <span class="field-optional">可选</span>
                            <span class="field-alias">别名: 手机, 联系电话, phone</span>
                        </div>
                        <div class="field-item">
                            <span class="field-primary">邮箱</span>
                            <span class="field-optional">可选</span>
                            <span class="field-alias">别名: 电子邮箱, email</span>
                        </div>
                        <div class="field-item">
                            <span class="field-primary">机构地址</span>
                            <span class="field-optional">可选</span>
                            <span class="field-alias">别名: 地址, 联系地址, address</span>
                        </div>
                    </div>
                    <div class="format-note">
                        <i class="fas fa-lightbulb"></i>
                        <strong>重要提示：</strong>第一行必须是列标题，姓名列不能为空，支持任意列顺序
                    </div>
                </div>
            </div>
            
            <!-- 导入进度 -->
            <div class="progress-container" id="importProgressContainer" style="display:none;">
                <div class="progress-bar" id="importProgress">0%</div>
                <div class="progress-text">正在导入，请稍候...</div>
            </div>
            
            <!-- 导入结果 -->
            <div id="importResult" style="margin-top: 15px; display: none;"></div>
            
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" id="cancelImport">取消</button>
                <button type="submit" class="btn btn-primary" id="startImport">
                    <i class="fas fa-upload"></i> 开始导入
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 导出模态框 - 完整版 -->
<div id="exportModal" class="modal">
    <div class="modal-content export-modal">
        <div class="modal-header">
            <h2><i class="fas fa-file-export"></i> 导出到文件</h2>
            <span class="close">&times;</span>
        </div>
        <form id="exportForm">
            <div class="form-group">
                <label for="exportFilename">文件名</label>
                <input type="text" id="exportFilename" name="filename" required placeholder="请输入文件名">
                <small class="file-hint">不需要输入文件扩展名</small>
            </div>
            
            <div class="form-group">
                <label for="exportType">文件类型</label>
                <select id="exportType" name="fileType">
                    <option value="xlsx">Excel 2007+ (.xlsx) - 推荐</option>
                    <option value="xls">Excel 97-2003 (.xls)</option>
                    <option value="csv">CSV 逗号分隔值 (.csv)</option>
                </select>
            </div>
            
            <!-- 导出范围显示 -->
            <div class="form-group">
                <label>导出范围</label>
                <div id="exportScopeInfo" class="scope-info">
                    <!-- 将通过JavaScript动态填充 -->
                </div>
            </div>
            
            <!-- 自定义导出字段 -->
            <div class="form-group field-selection">
                <label>选择要导出的字段</label>
                <div class="field-grid">
                    <label class="field-checkbox">
                        <input type="checkbox" class="export-field" value="name" checked disabled>
                        <span class="checkmark"></span>
                        <span class="field-name">姓名</span>
                        <span class="field-badge required">必选</span>
                    </label>
                    <label class="field-checkbox">
                        <input type="checkbox" class="export-field" value="organization" checked>
                        <span class="checkmark"></span>
                        <span class="field-name">机构名称</span>
                    </label>
                    <label class="field-checkbox">
                        <input type="checkbox" class="export-field" value="title" checked>
                        <span class="checkmark"></span>
                        <span class="field-name">职务</span>
                    </label>
                    <label class="field-checkbox">
                        <input type="checkbox" class="export-field" value="gender" checked>
                        <span class="checkmark"></span>
                        <span class="field-name">性别</span>
                    </label>
                    <label class="field-checkbox">
                        <input type="checkbox" class="export-field" value="phone" checked>
                        <span class="checkmark"></span>
                        <span class="field-name">电话</span>
                    </label>
                    <label class="field-checkbox">
                        <input type="checkbox" class="export-field" value="email" checked>
                        <span class="checkmark"></span>
                        <span class="field-name">邮箱</span>
                    </label>
                    <label class="field-checkbox">
                        <input type="checkbox" class="export-field" value="address" checked>
                        <span class="checkmark"></span>
                        <span class="field-name">机构地址</span>
                    </label>
                </div>
                <div class="field-actions">
                    <button type="button" class="btn btn-link" id="selectAllFields">
                        <i class="fas fa-check-double"></i> 全选
                    </button>
                    <button type="button" class="btn btn-link" id="unselectAllFields">
                        <i class="fas fa-times"></i> 全不选
                    </button>
                </div>
            </div>
            
            <input type="hidden" id="exportFolderId" name="folderId">
            <input type="hidden" id="exportCardIds" name="cardIds">
            
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" id="cancelExport">取消</button>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-download"></i> 开始导出
                </button>
            </div>
        </form>
    </div>
</div>
  <!---------------------------------------------------------------查找新增------------------------>
    <!-- 查找模态框 -->
    <div id="searchModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>查找</h2>
                <span class="close">&times;</span>
            </div>
            <div class="search-container">
                <input type="text" id="searchText" placeholder="请输入查找内容">
                <select id="searchField">
                    <option value="name">姓名</option>
                    <option value="organization">机构名称</option>
                    <option value="title">职务</option>
                    <option value="address">机构地址</option>
                    <option value="phone">电话</option>
                    <option value="email">邮箱</option>
                </select>
                
                
                  <!-- 新增：搜索范围选择 -->
            <div class="search-scope">
                <label><input type="radio" name="searchScope" value="global" checked> 全局查找</label>
                <label><input type="radio" name="searchScope" value="current"> 当前文件夹</label>
                <select id="folderSelect" disabled>
                   
                    <!-- 动态加载的文件夹选项 -->
                </select>
            </div>
            
                
                
            </div>
            <div class="search-actions">
                <button class="btn btn-primary" id="startSearch">开始查找</button>
            </div>
            
           <div id="searchResults">
    <!-- 这里会动态生成结果 -->
    <label>
        <input type="checkbox" id="selectAll"> 全选
    </label>
    <div class="search-results-list">
        <!-- 结果项将被插入在这里 -->
    </div>
</div>

        </div>
    </div>
  
  <!---------------------------------------------------------------查找新增------------------------>
  
    <!---------------------------------------------------------------查找新增------------------------>
  
  <!-- 替换模态框 -->
<div id="replaceModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h2>查找与替换</h2>
      <span class="close">&times;</span>
    </div>

    <div class="search-container">
      <div class="form-group">
        <label for="findText">查找内容</label>
        <input type="text" id="findText" placeholder="请输入要查找的内容">
      </div>

      <div class="form-group">
        <label for="replaceField">查找字段</label>
        <select id="replaceField">
          <option value="name">姓名</option>
          <option value="organization">机构名称</option>
          <option value="title">职务</option>
          <option value="address">地址</option>
          <option value="phone">电话</option>
          <option value="email">邮箱</option>
        </select>
      </div>

      <div class="form-group">
        <label for="replaceText">替换为</label>
        <input type="text" id="replaceText" placeholder="请输入替换内容">
      </div>

      <div class="form-group">
        <button class="btn btn-primary" id="startReplaceSearch">🔍 扫描匹配项</button>
      </div>
    </div>

    <hr>

    <div id="replaceResults" class="search-results-list">
      <!-- 替换匹配项将插入这里 -->
    </div>

    <div class="search-actions">
      <button class="btn btn-secondary" id="replaceOne">逐一替换</button>
      <button class="btn btn-primary" id="replaceAll">全部替换</button>
    </div>
  </div>
</div>
  <!---------------------------------------------------------------查找新增------------------------>
    <!-- 回收箱模态框 -->
    <div id="recycleModal" class="modal">
        <div class="modal-content" style="width: 90%; max-width: 800px;">
            <div class="modal-header">
                <h2>回收箱</h2>
                <span class="close">&times;</span>
            </div>
            <table class="recycle-list">
                <thead>
                    <tr>
                        <th><input type="checkbox" class="checkbox" id="recycleSelectAll"></th>
                        <th>名称</th>
                        <th>类型</th>
                        <th>原位置</th>
                        <th>属主</th>
                        <th>大小</th>
                        <th>删除时间</th>
                        <th>编辑时间</th>
                    </tr>
                </thead>
                <tbody id="recycleItems">
                    <!-- 回收箱列表会在这里动态生成 -->
                </tbody>
            </table>
            <div class="form-actions">
                <!--   <button class="btn btn-secondary" id="cancelRecycle">关闭</button> -->
                <button class="btn btn-primary" id="restoreSelected">还原所选</button>
                <button class="btn btn-danger" id="deleteSelected">永久清除</button>
            </div>
        </div>
    </div>
    
    <!-- 名片夹管理模态框 -->
    <div id="folderModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>新增名片夹</h2>
                <span class="close">&times;</span>
            </div>
            <form id="folderForm">
                <div class="form-group">
                    <label for="folderName">名片夹名称</label>
                    <input type="text" id="folderName" name="folder_name" required>
                </div>
                <input type="hidden" id="folderId" name="folder_id">
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" id="cancelFolder">取消</button>
                    <button type="submit" class="btn btn-primary">确定</button>
                </div>
            </form>
        </div>
    </div>
    
<!-- 权限管理模态框 - 完善版 -->
<div id="permissionsModal" class="modal">
    <div class="modal-content permission-modal-content">
        <div class="modal-header">
            <h2><i class="fas fa-user-shield"></i> 权限管理</h2>
            <span class="close">&times;</span>
        </div>
        
        <!-- 权限管理专用标签页 -->
        <div class="permission-tabs-wrapper">
            <div class="permission-tabs">
                <div class="permission-tab active" data-permission-tab="userGroups">
                    <i class="fas fa-users-cog"></i> 用户组管理
                </div>
                <div class="permission-tab" data-permission-tab="groupPermissions">
                    <i class="fas fa-shield-alt"></i> 组权限管理
                </div>
                <div class="permission-tab" data-permission-tab="userPermissions">
                    <i class="fas fa-user-check"></i> 用户权限管理
                </div>
            </div>
            
            <!-- 用户组管理标签页 -->
            <div class="permission-tab-content active" id="userGroupsContent">
                <div class="user-group-management">
                    <div class="management-header">
                        <h3><i class="fas fa-drag-handle"></i> 拖拽用户到对应组别</h3>
                        <p class="hint-text">将用户从一个组拖拽到另一个组来更改权限级别</p>
                    </div>
                    <div class="group-container">
                        <div class="user-group-section admin-section">
                            <div class="section-header">
                                <h3><i class="fas fa-user-crown"></i> 管理员组</h3>
                                <span class="user-count" id="adminCount">0</span>
                            </div>
                            <div class="user-list admin-list" id="adminUserList" data-group="admin">
                                <div class="loading-placeholder">
                                    <i class="fas fa-spinner fa-spin"></i>
                                    <span>加载中...</span>
                                </div>
                            </div>
                        </div>
                        <div class="user-group-section user-section">
                            <div class="section-header">
                                <h3><i class="fas fa-users"></i> 普通用户组</h3>
                                <span class="user-count" id="userCount">0</span>
                            </div>
                            <div class="user-list normal-list" id="normalUserList" data-group="user">
                                <div class="loading-placeholder">
                                    <i class="fas fa-spinner fa-spin"></i>
                                    <span>加载中...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="group-actions">
                        <button class="btn btn-secondary" id="refreshUserGroups">
                            <i class="fas fa-sync-alt"></i> 刷新数据
                        </button>
                        <button class="btn btn-info" id="exportUserGroups">
                            <i class="fas fa-download"></i> 导出配置
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 组权限管理标签页 -->
            <div class="permission-tab-content" id="groupPermissionsContent">
                <div class="permission-comparison">
                    <div class="permission-section admin-permissions">
                        <div class="section-header">
                            <h3><i class="fas fa-shield-alt"></i> 管理员组权限</h3>
                            <div class="permission-stats">
                                <span class="granted-count">已授权: <span id="adminGrantedCount">0</span></span>
                                <span class="total-count">总数: <span id="adminTotalCount">0</span></span>
                            </div>
                        </div>
                        <div class="permission-grid" id="adminGroupPermissions">
                            <div class="loading-placeholder">
                                <i class="fas fa-spinner fa-spin"></i>
                                <span>加载权限中...</span>
                            </div>
                        </div>
                    </div>
                    <div class="permission-section user-permissions">
                        <div class="section-header">
                            <h3><i class="fas fa-user-check"></i> 普通用户组权限</h3>
                            <div class="permission-stats">
                                <span class="granted-count">已授权: <span id="userGrantedCount">0</span></span>
                                <span class="total-count">总数: <span id="userTotalCount">0</span></span>
                            </div>
                        </div>
                        <div class="permission-grid" id="userGroupPermissions">
                            <div class="loading-placeholder">
                                <i class="fas fa-spinner fa-spin"></i>
                                <span>加载权限中...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="permission-actions">
                    <button class="btn btn-secondary" id="resetGroupPermissions">
                        <i class="fas fa-undo"></i> 重置默认
                    </button>
                    <button class="btn btn-primary" id="saveGroupPermissions">
                        <i class="fas fa-save"></i> 保存权限
                    </button>
                </div>
            </div>
            
            <!-- 用户权限管理标签页 -->
            <div class="permission-tab-content" id="userPermissionsContent">
                <div class="user-permission-management">
                    <div class="user-selection-panel">
                        <div class="panel-header">
                            <h4><i class="fas fa-filter"></i> 选择用户类型</h4>
                        </div>
                        <div class="user-type-selector">
                            <label class="radio-option">
                                <input type="radio" name="userType" value="admin" checked>
                                <div class="radio-custom">
                                    <i class="fas fa-crown"></i>
                                    <span>管理员</span>
                                </div>
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="userType" value="user">
                                <div class="radio-custom">
                                    <i class="fas fa-user"></i>
                                    <span>普通用户</span>
                                </div>
                            </label>
                        </div>
                        <div class="user-list-panel">
                            <h4><i class="fas fa-list"></i> 用户列表</h4>
                            <div class="search-box">
                                <input type="text" id="userSearchInput" placeholder="搜索用户...">
                                <i class="fas fa-search"></i>
                            </div>
                            <div class="user-list compact-list" id="permissionUserList">
                                <div class="loading-placeholder">
                                    <i class="fas fa-spinner fa-spin"></i>
                                    <span>加载用户中...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="permission-settings-panel">
                        <div class="panel-header">
                            <h4><i class="fas fa-cog"></i> 权限设置 <span id="selectedUserName">（请选择用户）</span></h4>
                            <div class="permission-summary" id="permissionSummary" style="display: none;">
                                <span class="summary-item">个人权限: <span id="personalCount">0</span></span>
                                <span class="summary-item">组权限: <span id="groupPermCount">0</span></span>
                            </div>
                        </div>
                        <div class="permission-settings" id="userPermissionSettings">
                            <div class="no-user-selected">
                                <i class="fas fa-hand-point-left"></i>
                                <p>请从左侧选择要设置权限的用户</p>
                                <small>选择用户后可以为其设置个性化权限</small>
                            </div>
                        </div>
                        <div class="permission-actions" style="display: none;" id="permissionActions">
                            <button class="btn btn-secondary" id="resetDefaultPermissions">
                                <i class="fas fa-undo"></i> 恢复默认值
                            </button>
                            <button class="btn btn-warning" id="previewPermissions">
                                <i class="fas fa-eye"></i> 预览效果
                            </button>
                            <button class="btn btn-primary" id="saveUserPermissions">
                                <i class="fas fa-save"></i> 保存权限
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- -------------------------------账户管理部分start标识----------------------------------------------------------------------- -->
    
    <!-- 账户管理模态框 -->
    <div id="accountsModal" class="modal">
        <div class="modal-content" style="width: 90%; max-width: 800px;">
            <div class="modal-header">
                <h2>账户管理</h2>
                <span class="close">&times;</span>
            </div>
            <div class="tabs-container">
                <div class="tab-container">
                    <div class="tab active" data-tab="accountsList">账户列表</div>
                    <div class="tab" data-tab="accountSuspend">挂起/放行账户</div>
                    <div class="tab" data-tab="accountSettings">系统设置</div>
                </div>
                
                <div class="tab-content active" id="accountsList">
                    <div class="form-actions" style="justify-content: flex-start; margin-bottom: 15px;">
                        <button class="btn btn-primary" id="addAccountBtn"><i class="fas fa-plus"></i> 新增账户</button>
                    </div>
                    <table class="table-view">
                        <thead>
                            <tr>
                                <th>账户名</th>
                                <th>用户类型</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="accountsTableBody"><!-- 账户管理-查看当前已有账户列表 -->
                            <!-- 账户列表会在这里动态生成 -->
                        </tbody>
                    </table>
                </div>
                
                <div class="tab-content" id="accountSuspend">
                    <table class="table-view">
                        <thead>
                            <tr>
                                <th>账户名</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="suspendedAccountsBody">
                            <!-- 挂起的账户列表会在这里动态生成 -->
                        </tbody>
                    </table>
                </div>
                
                <!-- 在Main.jsp中找到系统设置表单部分，替换为以下代码 -->
			<div class="tab-content" id="accountSettings">
			    <form id="systemSettingsForm">
			        <div class="form-group">
			            <label for="loginAttempts">允许登录出错次数</label>
			            <input type="number" id="loginAttempts" name="max_login_attempts" min="1" max="10" value=<%= systemsettingDAO.getValue("max_login_attempts") %>>
			            <small class="file-hint">
			                <i class="fas fa-info-circle"></i>
			                用户连续登录失败达到此次数后将被锁定
			            </small>
			        </div>
			        
			        <div class="form-group">
			            <label for="tempPasswordExpiry">临时密码有效期（分钟）</label>
			            <input type="number" id="tempPasswordExpiry" name="temp_password_expiry_minutes" min="1" max="60" value=<%= systemsettingDAO.getValue("temp_password_expiry_minutes") %>>
			            <small class="file-hint">
			                <i class="fas fa-info-circle"></i>
			                重置密码后临时密码的有效时间
			            </small>
			        </div>
			        
			        <div class="form-group">
			            <label for="defaultCardFolderName">默认名片夹名称</label>
			            <input type="text" id="defaultCardFolderName" name="default_card_folder_name" maxlength="50" value="我的名片夹">
			            <small class="file-hint">
			                <i class="fas fa-info-circle"></i>
			                新用户注册时自动创建的默认名片夹名称
			            </small>
			        </div>
			        
			        <div class="form-actions">
			            <button type="submit" class="btn btn-primary" id="saveSettings">
			                <i class="fas fa-save"></i> 保存设置
			            </button>
			            <button type="button" class="btn btn-secondary" id="resetSettings">
			                <i class="fas fa-undo"></i> 重置
			            </button>
			        </div>
			    </form>
			</div>
            </div>
        </div>
    </div>
    
    <!---------------------------------- 新增账户模态框 --------------------------------------------------------------------------->
    <div id="addAccountModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>新增账户</h2>
                <span class="close">&times;</span>
            </div>
            <form id="addAccountForm">
                <div class="form-group">
                    <label for="newAccountName">账户名</label>
                    <input type="text" id="newAccountName" name="username" required>
                </div>
                <div class="form-group">
                    <label for="newPassWord">设置口令</label>
                    <input type="text" id="newPassWord" name="password" required>
                </div>
                <div class="form-group">
            		<label for="confirmPassword">确认口令</label>
            		<input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入账户口令">
        		</div>
                <div class="form-group">
                    <label for="newAccountEmail">电子邮箱</label>
                    <input type="email" id="newAccountEmail" name="email" required>
                </div>
                <div class="form-group">
                    <label for="newAccountType">用户类型</label>
                    <select id="newAccountType" name="user_type">
                        <option value="user">普通用户</option>
                        <option value="admin">管理员</option>
                    </select>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" id="cancelAddAccount">取消</button>
                    <button type="submit" class="btn btn-primary">确认</button>
                </div>
            </form>
        </div>
    </div>
<!-- -------------------------------账户管理部分end标识----------------------------------------------------------------------- -->

	<!-- 共享模态框 -->
<div id="shareModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>共享内容</h2>
            <span class="close">&times;</span>
        </div>
        <form id="shareForm">
            <div id="shareResourceInfo" class="form-group" style="background: #f3f4f6; padding: 10px; border-radius: 4px; margin-bottom: 15px;">
                <!-- 资源信息将在这里显示 -->
            </div>
            
            <div class="form-group">
                <label>共享类型</label>
                <div style="display: flex; gap: 15px; margin-top: 5px;">
                    <label style="display: flex; align-items: center;">
                        <input type="radio" name="shareType" value="user" checked style="margin-right: 5px;">
                        特定用户
                    </label>
                    <label style="display: flex; align-items: center;">
                        <input type="radio" name="shareType" value="group" style="margin-right: 5px;">
                        用户组
                    </label>
                    <label style="display: flex; align-items: center;">
                        <input type="radio" name="shareType" value="public" style="margin-right: 5px;">
                        公开共享
                    </label>
                </div>
            </div>
            
            <div class="form-group">
                <label for="shareTarget">共享目标</label>
                <select id="shareTarget" name="shareTarget">
                    <option value="">请选择...</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="sharePermission">权限级别</label>
                <select id="sharePermission" name="permissionLevel" required>
                    <option value="read">只读</option>
                    <option value="edit">编辑</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="shareExpiry">有效期</label>
                <select id="shareExpiry" name="expiresIn">
                    <option value="">永不过期</option>
                    <option value="1hour">1小时</option>
                    <option value="1day">1天</option>
                    <option value="1week">1周</option>
                </select>
            </div>
            
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" id="cancelShare">取消</button>
                <button type="submit" class="btn btn-primary">创建共享</button>
            </div>
        </form>
    </div>
</div>

<!-- 共享管理模态框 -->
<div id="shareManagementModal" class="modal">
    <div class="modal-content" style="width: 90%; max-width: 800px;">
        <div class="modal-header">
            <h2>我的共享</h2>
            <span class="close">&times;</span>
        </div>
        <div id="mySharesList">
            <!-- 共享列表将在这里显示 -->
        </div>
    </div>
</div>

<!-- 共享给我的内容模态框 -->
<div id="sharedWithMeModal" class="modal">
    <div class="modal-content" style="width: 90%; max-width: 800px;">
        <div class="modal-header">
            <h2>共享给我的内容</h2>
            <span class="close">&times;</span>
        </div>
        <div id="accessibleSharesList">
            <!-- 可访问的共享列表将在这里显示 -->
        </div>
    </div>
</div>

<!-- 共享日志模态框 -->
<div id="shareLogsModal" class="modal">
    <div class="modal-content" style="width: 90%; max-width: 600px;">
        <div class="modal-header">
            <h2>共享日志</h2>
            <span class="close">&times;</span>
        </div>
        <div id="shareLogsList">
            <!-- 共享日志将在这里显示 -->
        </div>
    </div>
</div>
    
    <!-- 右键菜单 -->
    <div id="contextMenu" class="context-menu">
        <a href="#" id="ctxOpen">打开</a>
        <a href="#" id="ctxRename">重命名</a>
        <a href="#" id="ctxExport">导出</a>
        <a href="#" id="ctxRestore">还原</a>
        <a href="#" id="ctxCopyTo">复制至</a>
        <a href="#" id="ctxMoveTo">移动至</a>
        <a href="#" id="ctxDelete">删除</a>
        <a href="#" id="ctxPermanentDelete">永久清除</a>
    </div>
    
    <!-- 消息提示 -->
    <div id="message" class="message">
        <i class="fas fa-info-circle"></i>
        <span id="messageText"></span>
    </div>
    
    <!-- 脚本引入 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
    <script src="assets/js/permission-management.js"></script>
    <script src="assets/js/system-settings.js"></script>
    <script src="assets/js/print-management.js"></script>
    <script src="assets/js/share-management.js"></script>
    <script src="assets/js/search-management.js"></script>
    <script src="assets/js/card-management.js"></script>
    <script src="assets/js/folder-management.js"></script>
    <script src="assets/js/recyclebin-management.js"></script>
    <script src="assets/js/UI.js"></script>
    <script>
    // 初始化粒子效果
particlesJS('particles-js', {
    "particles": {
        "number": {
            "value": 60,
            "density": {
                "enable": true,
                "value_area": 800
            }
        },
        "color": {
            "value": "#3a7bd5"
        },
        "shape": {
            "type": "circle",
            "stroke": {
                "width": 0,
                "color": "#000000"
            },
            "polygon": {
                "nb_sides": 5
            }
        },
        "opacity": {
            "value": 0.4,
            "random": true,
            "anim": {
                "enable": true,
                "speed": 0.5,
                "opacity_min": 0.1,
                "sync": false
            }
        },
        "size": {
            "value": 3,
            "random": true,
            "anim": {
                "enable": true,
                "speed": 2,
                "size_min": 0.1,
                "sync": false
            }
        },
        "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#3a7bd5",
            "opacity": 0.2,
            "width": 1
        },
        "move": {
            "enable": true,
            "speed": 1.5,
            "direction": "none",
            "random": true,
            "straight": false,
            "out_mode": "bounce",
            "bounce": true,
            "attract": {
                "enable": true,
                "rotateX": 600,
                "rotateY": 1200
            }
        }
    },
    "interactivity": {
        "detect_on": "canvas",
        "events": {
            "onhover": {
                "enable": true,
                "mode": "bubble"
            },
            "onclick": {
                "enable": true,
                "mode": "push"
            },
            "resize": true
        },
        "modes": {
            "grab": {
                "distance": 140,
                "line_linked": {
                    "opacity": 1
                }
            },
            "bubble": {
                "distance": 100,
                "size": 4,
                "duration": 2,
                "opacity": 0.8,
                "speed": 3
            },
            "repulse": {
                "distance": 100,
                "duration": 0.4
            },
            "push": {
                "particles_nb": 4
            },
            "remove": {
                "particles_nb": 2
            }
        }
    },
    "retina_detect": true
});

// 全局变量和工具函数
const ctx = '<%= request.getContextPath() %>';
const username = '<%= username %>';
const currentUserId = <%= userId %>;
const currentUserType = '<%= userType %>';

let currentFolder = null;
let selectedCardIds = [];

//权限管理功能优化版本 - 修复JSP EL表达式冲突
let permissionData = {
    allPermissions: [],
    currentSelectedUser: null,
    userPermissions: {},
    isLoading: false
};

//全局变量用于跟踪共享访问状态
let isInSharedMode = false;
let sharedResourceInfo = null;


// 显示消息
function showMessage(text, type = 'info') {
    const messageEl = document.getElementById('message');
    const messageText = document.getElementById('messageText');
    
    // 设置图标
    const iconEl = messageEl.querySelector('i');
    iconEl.className = '';
    
    if (type === 'success') {
        iconEl.className = 'fas fa-check-circle';
    } else if (type === 'error') {
        iconEl.className = 'fas fa-exclamation-circle';
    } else {
        iconEl.className = 'fas fa-info-circle';
    }
    
    messageText.textContent = text;
    messageEl.className = 'message ' + type;
    messageEl.classList.add('show');
    
    setTimeout(() => {
        messageEl.classList.remove('show');
    }, 3000);
}

// 显示加载动画
function showLoader() {
    document.getElementById('loader').style.display = 'flex';
}

// 隐藏加载动画
function hideLoader() {
    document.getElementById('loader').style.display = 'none';
}

// 显示模态框
function showModal(modalId) {
    document.getElementById(modalId).style.display = 'block';
}

// 隐藏模态框
function hideModal(modalId) {
    document.getElementById(modalId).style.display = 'none';
}

// 显示下拉菜单
function toggleDropdown(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    dropdown.classList.toggle('active');
    
    // 隐藏其他下拉菜单
    document.querySelectorAll('.dropdown-menu').forEach(menu => {
        if (menu.id !== dropdownId && menu.classList.contains('active')) {
            menu.classList.remove('active');
        }
    });
}

//切换到挂起账户标签页----------------------------账户管理新增部分-------------------------------
document.querySelector('[data-tab="accountSuspend"]').addEventListener('click', loadSuspendedAccounts);
function switchTab(tabContainer, tabId) {
	console.log('[调试] 查找容器:', tabContainer);
 
 const container = document.querySelector(tabContainer);
 
 // 1. 添加空值保护可用版
 if (!container) {
     console.error(`找不到容器: ${tabContainer}`);
     return;
 }
 // 2. 标签状态更新

 const tabs = document.querySelectorAll('.tab');
 if (tabs.length === 0) {
     console.error('未找到标签元素');
     return;
 }
// 为每个标签页添加点击事件监听器
 tabs.forEach(tab => {
             tab.addEventListener('click', function() {
                 // 移除所有标签页的active类
                 document.querySelectorAll('.tab').forEach(t => {
                     t.classList.remove('active');
                 });
                 
                 // 为当前点击的标签页添加active类
                 this.classList.add('active');
                 
                 // 获取目标内容区域的ID
                 const targetTabId = this.getAttribute('data-tab');
                 
                 // 隐藏所有内容区域
                 document.querySelectorAll('.tab-content').forEach(content => {
                     content.classList.remove('active');
                 });
                 
                 // 显示目标内容区域
                 const targetContent = document.getElementById(targetTabId);
                 if (targetContent) {
                     targetContent.classList.add('active');
                 }
             });
         });

}
//----------切换到挂起账户标签页----------------------------账户管理新增部分-------------------------------




//------------------------------------------------------------查找新增---------------------------------------------------------------------


//------------------------------------------------------------查找新增---------------------------------------------------------------------




// 初始化事件监听
function initEventListeners() {
console.log('初始化事件监听器...');

    
    // 下拉菜单点击事件
    const newBtn = document.getElementById('newBtn');
    if (newBtn) {
        newBtn.addEventListener('click', () => {
            toggleDropdown('newDropdown');
        });
    }
    
    const searchBtn = document.getElementById('searchBtn');
    if (searchBtn) {
        searchBtn.addEventListener('click', () => {
            toggleDropdown('searchDropdown');
        });
    }
    
    const shareBtn = document.getElementById('shareBtn');
    if (shareBtn) {
        shareBtn.addEventListener('click', () => {
            toggleDropdown('shareDropdown');
        });
    }
    
    
 // ========== 新增：名片夹表单提交事件监听器 ==========
    const folderForm = document.getElementById('folderForm');
    if (folderForm) {
        folderForm.addEventListener('submit', (e) => {
            e.preventDefault(); // 阻止默认的表单提交行为
            
            const folderName = document.getElementById('folderName').value.trim();
            const folderId = document.getElementById('folderId').value;
            
            if (!folderName) {
                showMessage('名片夹名称不能为空', 'error');
                return;
            }
            
            if (folderId) {
                // 更新名片夹
                updateFolder(parseInt(folderId), folderName);
            } else {
                // 创建新名片夹
                createFolder(folderName);
            }
            
            hideModal('folderModal');
        });
    }
    
    // ========== 新增：取消按钮事件监听器 ==========
    const cancelFolderBtn = document.getElementById('cancelFolder');
    if (cancelFolderBtn) {
        cancelFolderBtn.addEventListener('click', (e) => {
            e.preventDefault();
            hideModal('folderModal');
        });
    }
    // 名片夹表单提交事件
    // 新增名片夹按钮
    
    // 逐片新增点击事件
    // 新增名片按钮
    const addCardOne = document.getElementById('addCardOne');
    if (addCardOne) {
        removePermissionClickHandler(addCardOne);
        
        addCardOne.addEventListener('click', (e) => {
            e.preventDefault();
            
            if (!checkPermissionBeforeAction('create_card', '创建名片')) {
                return;
            }
            
            document.getElementById('addCardForm').reset();
            document.getElementById('cardId').value = '';
            document.querySelector('#addCardModal .modal-header h2').textContent = '新增名片';
            
            if (currentFolder) {
                document.getElementById('cardFolder').value = currentFolder;
            }
            
            showModal('addCardModal');
        });
    }
    
 // 取消共享按钮事件
    document.getElementById('cancelShare').addEventListener('click', () => {
        hideModal('shareModal');
    });

    // 初始化共享管理功能
    initShareManagement();
    
 // 名片表单提交事件 - 修复版
    document.getElementById('addCardForm').addEventListener('submit', (e) => {
        e.preventDefault();
        console.log('[DEBUG] 名片表单提交事件触发');
        
        const formData = new FormData(e.target);
        const cardId = document.getElementById('cardId').value;
        
        // 添加调试信息
        console.log('[DEBUG] 表单提交 - 名片ID:', cardId);
        console.log('[DEBUG] 共享模式状态:', isInSharedMode);
        if (isInSharedMode && sharedResourceInfo) {
            console.log('[DEBUG] 共享资源信息:', sharedResourceInfo);
        }
        
        // 在共享模式下的额外验证
        if (isInSharedMode) {
            // 检查是否有编辑权限
            if (!window.shareManagement.hasSharedEditPermission()) {
                showMessage('只读权限，无法保存更改', 'error');
                return;
            }
            
            // 在共享模式下，确保不会意外更改文件夹
            if (sharedResourceInfo && sharedResourceInfo.type === 'CARD') {
                // 单名片共享模式下，应该保持原文件夹
                const currentFolderId = formData.get('folder_id');
                console.log('[DEBUG] 共享名片编辑 - 当前文件夹ID:', currentFolderId);
            }
        }
        
        if (cardId) {
            console.log('[DEBUG] 更新现有名片');
            updateCard(formData);
        } else {
            console.log('[DEBUG] 添加新名片');
            addCard(formData);
        }
        
        hideModal('addCardModal');
    });
 
 
 // 增强的模态框关闭处理
    function hideModalEnhanced(modalId) {
        hideModal(modalId);
        
        // 如果关闭的是名片编辑模态框，清理共享模式相关的UI状态
        if (modalId === 'addCardModal') {
            // 移除共享模式提示
            const sharedNotice = document.getElementById('sharedEditNotice');
            if (sharedNotice) {
                sharedNotice.remove();
            }
            
            // 恢复表单标题
            const modalHeader = document.querySelector('#addCardModal .modal-header h2');
            if (modalHeader) {
                modalHeader.textContent = '新增名片';
                modalHeader.style.color = '';
            }
            
            // 恢复文件夹选择器状态
            const folderSelect = document.getElementById('cardFolder');
            if (folderSelect) {
                folderSelect.disabled = false;
                folderSelect.title = '';
            }
        }
    }

    
    // ---------------------------------------------------------------------------新增和修改部分
    // 批量新增点击事件
    const addCardBatch = document.getElementById('addCardBatch');
    if (addCardBatch) {
        removePermissionClickHandler(addCardBatch);
        
        addCardBatch.addEventListener('click', (e) => {
            e.preventDefault();
            
            if (!checkPermissionBeforeAction('create_card', '创建名片')) {
                return;
            }
            
            const tbody = document.getElementById('batchTableBody');
            tbody.innerHTML = '';
            addNewBatchRow();
            if (currentFolder) {
                document.getElementById('batchCardFolder').value = currentFolder;
            }
            showModal('batchAddModal');
        });
    }
    
    // 权限管理按钮
    const permissionsBtn = document.getElementById('permissionsBtn');
    if (permissionsBtn) {
        removePermissionClickHandler(permissionsBtn);
        
        permissionsBtn.addEventListener('click', (e) => {
            e.preventDefault();
            
            if (!checkPermissionBeforeAction('manage_permissions', '权限管理')) {
                return;
            }
            
            console.log('打开权限管理模态框');
            showModal('permissionsModal');
            
            setTimeout(() => {
                console.log('开始初始化权限管理');
                initPermissionTabSwitching();
                initPermissionManagement();
            }, 300);
        });
    }
    
    // 账户管理按钮
    const accountsBtn = document.getElementById('accountsBtn');
    if (accountsBtn) {
        removePermissionClickHandler(accountsBtn);
        
        accountsBtn.addEventListener('click', (e) => {
            e.preventDefault();
            
            if (!checkPermissionBeforeAction('manage_users', '用户管理')) {
                return;
            }
            
            loadUserList();
            loadSystemSettings();
            showModal('accountsModal');
        });
    }
    
 // 新增名片夹按钮
    const addFolderBtn = document.getElementById('addFolderBtn');
    if (addFolderBtn) {
        removePermissionClickHandler(addFolderBtn);
        
        addFolderBtn.addEventListener('click', (e) => {
            e.preventDefault();
            
            if (!checkPermissionBeforeAction('create_folder', '创建名片夹')) {
                return;
            }
            
            document.getElementById('folderName').value = '';
            document.getElementById('folderId').value = '';
            document.querySelector('#folderModal .modal-header h2').textContent = '新增名片夹';
            showModal('folderModal');
        });
    }
    
    console.log('事件监听器初始化完成');
    
    // 添加批量行
    document.getElementById('addBatchRowBtn').addEventListener('click', () => {
    	const allRows = document.querySelectorAll('#batchTableBody tr');
        let allValid = true;

        allRows.forEach(row => {
            const inputs = row.querySelectorAll('input, select');
            inputs.forEach(input => {
                if (!input.checkValidity()) {
                    input.reportValidity(); // 浏览器显示提示
                    allValid = false;
                }
            });
        });

        if (!allValid) {
            alert('请确保已有所有行内容都填写完整且格式正确后再添加新行。');
            return;
        }

        addNewBatchRow();
	});
    
 // 7. 添加权限状态刷新函数
    function refreshPermissionsAndUI() {
        console.log('刷新权限和UI状态...');
        return loadCurrentUserPermissions().then(() => {
            console.log('权限刷新完成');
        }).catch(error => {
            console.error('权限刷新失败:', error);
        });
    }
    
 	// 添加新行逻辑
    function addNewBatchRow() {
        const template = document.getElementById('batchRowTemplate');
        const tbody = document.getElementById('batchTableBody');
        const clone = template.content.cloneNode(true);
        tbody.appendChild(clone);
    }
    
    // 确认批量添加
    document.getElementById('batchAddForm').addEventListener('submit', (e) => {
	    e.preventDefault();
	
	    const folderId = document.getElementById('batchCardFolder').value;
	    const rows = document.querySelectorAll('#batchTableBody tr');
	
	    if (rows.length === 0) {
	        alert('请至少添加一行名片信息。');
	        return;
	    }
	
	    let hasInvalid = false;
	    rows.forEach(row => {
	        const inputs = row.querySelectorAll('input, select');
	        const formData = new FormData();
	        inputs.forEach(input => {
	            if (!input.checkValidity()) {
	                input.reportValidity();
	                hasInvalid = true;
	            }
	            formData.append(input.name, input.value.trim());
	        });
	
	        if (!hasInvalid) {
	            formData.append('folder_id', folderId);
	            addCard(formData); // 你已有的函数：提交一条记录
	        }
	    });
	
	    if (!hasInvalid) {
	        hideModal('batchAddModal');
	    }
	});
    
    // 取消批量新增事件
    document.getElementById('cancelBatchAdd').addEventListener('click', () => {
    	hideModal('batchAddModal');
    });
    // -------------------------------------------------------------------------------------
let isImporting = false; // 用来防止重复导入

// 导入功能JavaScript
document.getElementById('importForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    if (isImporting) {
        showMessage('导入操作正在进行，请稍后...', 'error');
        return;
    }
    
    isImporting = true; // 设置为正在导入

    const fileInput = document.getElementById('importFile');
    if (!fileInput.files || !fileInput.files[0]) {
        showMessage('请选择要导入的文件', 'error');
        isImporting = false; // 解除导入锁定
        return;
    }
    
    const file = fileInput.files[0];
    const maxSize = 10 * 1024 * 1024; // 10MB
    
    if (file.size > maxSize) {
        showMessage('文件大小不能超过10MB', 'error');
        isImporting = false; // 解除导入锁定
        return;
    }
    
    const formData = new FormData(this);
    
    // 显示进度条
    const progressContainer = document.getElementById('importProgressContainer');
    const progressBar = document.getElementById('importProgress');
    const resultDiv = document.getElementById('importResult');
    const submitBtn = document.getElementById('startImport');
    
    progressContainer.style.display = 'block';
    resultDiv.style.display = 'none';
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 导入中...';
    
    // 模拟进度更新
    let progress = 0;
    const progressInterval = setInterval(() => {
        progress += Math.random() * 10;
        if (progress > 85) progress = 85;
        progressBar.style.width = progress + '%';
        progressBar.textContent = Math.round(progress) + '%';
    }, 300);
    
    fetch('ImportCardServlet', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('网络响应异常: ' + response.status);
        }
        return response.json();
    })
    .then(data => {
        clearInterval(progressInterval);
        progressBar.style.width = '100%';
        progressBar.textContent = '100%';
        
        // 显示导入结果
        setTimeout(() => {
            displayImportResult(data);
            
            // 如果导入成功，刷新当前视图
            if (data.success && data.successCount > 0) {
                if (currentFolder) {
                    loadCards(currentFolder);
                }
                loadFolders();
                
                // 显示成功消息
                setTimeout(() => {
                    showMessage('成功导入 ' + data.successCount + ' 条名片记录', 'success');
                }, 1000);
            }
        }, 800);
    })
    .catch(error => {
        clearInterval(progressInterval);
        console.error('导入失败:', error);
        showMessage('导入失败: ' + error.message, 'error');
        
        resultDiv.innerHTML = '<div class="alert alert-error"><h4><i class="fas fa-exclamation-circle"></i> 导入失败</h4><p>' + error.message + '</p></div>';
        resultDiv.style.display = 'block';
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="fas fa-upload"></i> 开始导入';
        isImporting = false; // 导入完成，解除锁定
    });
});

// 修复后的显示导入结果函数
function displayImportResult(result) {
    const resultDiv = document.getElementById('importResult');
    let html = '';
    
    if (result.success) {
        html += '<div class="alert alert-success">';
        html += '<h4><i class="fas fa-check-circle"></i> ' + result.message + '</h4>';
        html += '<ul>';
        
        // 修复：使用正确的字段名
        const totalRecords = result.totalRecords || result.totalProcessed || 0;
        const successCount = result.successCount || 0;
        const errorCount = result.errorCount || 0;
        const skippedCount = result.skippedCount || (totalRecords - successCount - errorCount);
        
        html += '<li><strong>总记录数:</strong> ' + totalRecords + '</li>';
        html += '<li><strong>成功导入:</strong> ' + successCount + ' 条</li>';
        
        if (skippedCount > 0) {
            html += '<li><strong>跳过记录:</strong> ' + skippedCount + ' 条</li>';
        }
        if (errorCount > 0) {
            html += '<li><strong>错误记录:</strong> ' + errorCount + ' 条</li>';
        }
        html += '</ul>';
        
        // 显示错误详情 - 修复错误显示格式
        if (result.errors && result.errors.length > 0) {
            html += '<h5><i class="fas fa-exclamation-triangle"></i> 错误详情:</h5>';
            html += '<div class="error-details">';
            
            // 检查errors是否是字符串数组还是对象数组
            if (Array.isArray(result.errors)) {
                result.errors.forEach(error => {
                    if (typeof error === 'string') {
                        html += '<p>• ' + error + '</p>';
                    } else if (error.rowNumber && error.message) {
                        html += '<p>• 第' + error.rowNumber + '行: ' + error.message + '</p>';
                    } else {
                        html += '<p>• ' + JSON.stringify(error) + '</p>';
                    }
                });
            }
            html += '</div>';
        }
        
        html += '</div>';
        
        // 添加操作按钮
        html += '<div class="form-actions">';
        html += '<button type="button" class="btn btn-primary" onclick="hideModal(\'importModal\')">确定</button>';
        if (successCount > 0) {
            html += '<button type="button" class="btn btn-secondary" onclick="startNewImport()">继续导入</button>';
        }
        html += '</div>';
        
    } else {
        html += '<div class="alert alert-error">';
        html += '<h4><i class="fas fa-exclamation-circle"></i> 导入失败</h4>';
        html += '<p>' + result.message + '</p>';
        
        if (result.errors && result.errors.length > 0) {
            html += '<div class="error-details">';
            if (Array.isArray(result.errors)) {
                result.errors.forEach(error => {
                    if (typeof error === 'string') {
                        html += '<p>• ' + error + '</p>';
                    } else if (error.rowNumber && error.message) {
                        html += '<p>• 第' + error.rowNumber + '行: ' + error.message + '</p>';
                    } else {
                        html += '<p>• ' + JSON.stringify(error) + '</p>';
                    }
                });
            }
            html += '</div>';
        }
        html += '</div>';
        
        // 失败时也添加确定按钮
        html += '<div class="form-actions">';
        html += '<button type="button" class="btn btn-primary" onclick="hideModal(\'importModal\')">确定</button>';
        html += '</div>';
    }
    
    resultDiv.innerHTML = html;
    resultDiv.style.display = 'block';
}

// 开始新的导入
function startNewImport() {
    document.getElementById('importForm').reset();
    document.getElementById('importProgressContainer').style.display = 'none';
    document.getElementById('importResult').style.display = 'none';
    
    // 保持当前文件夹选择
    if (currentFolder) {
        document.getElementById('importFolder').value = currentFolder;
    }
}
		
		// 导出功能JavaScript
		document.getElementById('exportForm').addEventListener('submit', function(e) {
		    e.preventDefault();
		    
		    const filename = document.getElementById('exportFilename').value.trim();
		    if (!filename) {
		        showMessage('请输入文件名', 'error');
		        return;
		    }
		    
		    const fileType = document.getElementById('exportType').value;
		    const folderId = document.getElementById('exportFolderId').value;
		    const cardIds = document.getElementById('exportCardIds').value;
		    
		    // 获取选中的字段
		    const selectedFields = [];
		    document.querySelectorAll('.export-field:checked').forEach(checkbox => {
		        selectedFields.push(checkbox.value);
		    });
		    
		    if (selectedFields.length === 0) {
		        showMessage('请至少选择一个导出字段', 'error');
		        return;
		    }
		    
		    // 构建下载URL
		    let url = 'ExportCardServlet?filename=' + encodeURIComponent(filename) + 
		              '&fileType=' + fileType +
		              '&fields=' + encodeURIComponent(JSON.stringify(selectedFields));
		    
		    if (folderId) {
		        url += '&folderId=' + folderId;
		    } else if (cardIds) {
		        url += '&cardIds=' + encodeURIComponent(cardIds);
		    } else {
		        showMessage('请选择要导出的内容', 'error');
		        return;
		    }
		    
		    // 显示导出进度
		    const submitBtn = e.target.querySelector('button[type="submit"]');
		    const originalText = submitBtn.innerHTML;
		    submitBtn.disabled = true;
		    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 导出中...';
		    
		    // 创建隐藏的下载链接
		    const downloadLink = document.createElement('a');
		    downloadLink.href = url;
		    downloadLink.style.display = 'none';
		    document.body.appendChild(downloadLink);
		    downloadLink.click();
		    document.body.removeChild(downloadLink);
		    
		    // 延迟恢复按钮状态
		    setTimeout(() => {
		        submitBtn.disabled = false;
		        submitBtn.innerHTML = originalText;
		        hideModal('exportModal');
		        showMessage('导出请求已提交，请稍候下载', 'success');
		    }, 2000);
		});
		
		// 导出字段选择功能
		document.getElementById('selectAllFields').addEventListener('click', function() {
		    document.querySelectorAll('.export-field:not([disabled])').forEach(checkbox => {
		        checkbox.checked = true;
		    });
		});
		
		document.getElementById('unselectAllFields').addEventListener('click', function() {
		    document.querySelectorAll('.export-field:not([disabled])').forEach(checkbox => {
		        checkbox.checked = false;
		    });
		    // 姓名字段保持选中
		    document.querySelector('.export-field[value="name"]').checked = true;
		});
		
		// 导出范围信息更新
		function updateExportScopeInfo() {
		    const scopeInfo = document.getElementById('exportScopeInfo');
		    const folderId = document.getElementById('exportFolderId').value;
		    const cardIds = document.getElementById('exportCardIds').value;
		    
		    if (folderId) {
		        const folderName = getCurrentFolderName();
		        scopeInfo.innerHTML = '<i class="fas fa-folder"></i> 导出整个名片夹: <strong>' + folderName + '</strong>';
		    } else if (cardIds) {
		        try {
		            const ids = JSON.parse(cardIds);
		            scopeInfo.innerHTML = '<i class="fas fa-file"></i> 导出选中的 <strong>' + ids.length + '</strong> 张名片';
		        } catch (e) {
		            scopeInfo.innerHTML = '<i class="fas fa-file"></i> 导出选中的名片';
		        }
		    } else {
		        scopeInfo.innerHTML = '<i class="fas fa-info-circle"></i> 请先选择要导出的内容';
		    }
		}
		
		// 获取当前文件夹名称
		function getCurrentFolderName() {
		    const activeFolder = document.querySelector('.card-folder.active');
		    return activeFolder ? activeFolder.textContent.trim() : '未知文件夹';
		}
		
		// 修改原有的导出按钮点击事件
		// 修改导出按钮事件监听器，添加权限检查
		document.getElementById('exportFile').addEventListener('click', () => {
		    // 🔧 修复：添加权限检查
		    if (!checkPermissionBeforeAction('import_export', '导出')) {
		        return;
		    }
		    
		    document.getElementById('exportFilename').value = '名片导出_' + new Date().toISOString().slice(0, 10).replace(/-/g, '');
		    
		    // 重置字段选择
		    document.querySelectorAll('.export-field').forEach(checkbox => {
		        checkbox.checked = true;
		    });
		    
		    // 如果当前有名片夹，自动选中
		    if (currentFolder) {
		        document.getElementById('exportFolderId').value = currentFolder;
		        document.getElementById('exportCardIds').value = '';
		    } else {
		        document.getElementById('exportFolderId').value = '';
		        document.getElementById('exportCardIds').value = '';
		    }
		    
		    updateExportScopeInfo();
		    showModal('exportModal');
		});
		
		// 修改原有的批量导入点击事件
		// 修改导入按钮事件
		document.getElementById('importCardBatch').addEventListener('click', () => {
		    // 🔧 修复：添加权限检查
		    if (!checkPermissionBeforeAction('import_export', '导入')) {
		        return;
		    }
		    
		    document.getElementById('importForm').reset();
		    document.getElementById('importProgressContainer').style.display = 'none';
		    document.getElementById('importResult').style.display = 'none';
		    
		    // 如果当前有名片夹，自动选中
		    if (currentFolder) {
		        document.getElementById('importFolder').value = currentFolder;
		    }
		    
		    showModal('importModal');
		});
				
		// 取消按钮事件
		document.getElementById('cancelImport').addEventListener('click', () => {
		    hideModal('importModal');
		});
		
		document.getElementById('cancelExport').addEventListener('click', () => {
		    hideModal('exportModal');
		});
		
	//<----------------------------------------------------------------------导出导入部分到此终止-------------> 
		    
    // 打印按钮点击事件
// ==================== 5. 修改打印按钮的事件处理 ====================
// 修改打印按钮事件监听器
document.getElementById('printBtn').addEventListener('click', () => {
    // 🔧 修复：添加权限检查
    if (!checkPermissionBeforeAction('print', '打印')) {
        return;
    }
    
    if (selectedCardIds.length > 0) {
        // 有选中的名片，打印选中的
        if (confirm('是否要先预览再打印？\n点击"确定"进行预览，点击"取消"直接打印')) {
            printCards(selectedCardIds, true);
        } else {
            printCards(selectedCardIds, false);
        }
    } else if (currentFolder) {
        // 没有选中，打印当前文件夹的所有名片
        if (confirm('将打印当前名片夹的所有名片，是否要先预览？\n点击"确定"进行预览，点击"取消"直接打印')) {
            printCards([], true); // 空数组表示打印当前文件夹所有名片
        } else {
            printCards([], false);
        }
    } else {
        showMessage('请先选择一个名片夹或选中要打印的名片', 'info');
    }
});

console.log('权限检查和预览样式优化已完成！');
    
    // 回收站按钮点击事件
    document.getElementById('recycleBtn').addEventListener('click', () => {
        loadRecycleBinItems();
        showModal('recycleModal');
    });
    
    // 回收站全选/全不选
    // 回收站全选/全不选（修复版）
	document.getElementById('recycleSelectAll').addEventListener('change', function() {
	    const checkboxes = document.querySelectorAll('.recycle-checkbox');
	    const isChecked = this.checked;
	    
	    selectedRecycleItemIds = [];
	    
	    checkboxes.forEach(checkbox => {
	        checkbox.checked = isChecked;
	        if (isChecked) {
	            const itemId = parseInt(checkbox.dataset.id);
	            selectedRecycleItemIds.push(itemId);
	        }
	    });
	    
	    updateRecycleSelectAllState();
	});
    
	// 还原所选按钮（使用批量还原函数）
	document.getElementById('restoreSelected').addEventListener('click', () => {
	    if (selectedRecycleItemIds.length === 0) {
	        showMessage('请选择要还原的项目', 'error');
	        return;
	    }
	    
	    batchRestoreItems(selectedRecycleItemIds);
	});
    
	// 永久清除按钮（使用批量删除函数）
	document.getElementById('deleteSelected').addEventListener('click', () => {
	    if (selectedRecycleItemIds.length === 0) {
	        showMessage('请选择要删除的项目', 'error');
	        return;
	    }

	    if (confirm('确定要永久删除所选的 ' + selectedRecycleItemIds.length + ' 个项目吗？此操作无法撤销。')) {
	        batchPermanentDeleteItems(selectedRecycleItemIds);
	    }
	});
    
 // 权限按钮点击事件 - 修复版
    document.getElementById('permissionsBtn').addEventListener('click', () => {
        // 检查用户类型是否为管理员
        if (currentUserType !== 'ADMIN') {
            showMessage('抱歉，非管理员不可进行该操作', 'error');
            return;
        }
        
        console.log('打开权限管理模态框');
        showModal('permissionsModal');
        
        // 延迟初始化以确保模态框已完全显示
        setTimeout(() => {
            console.log('开始初始化权限管理');
            
            // 初始化权限管理标签页切换
            initPermissionTabSwitching();
            
            // 初始化权限管理功能
            initPermissionManagement();
        }, 300);
    });
    
    // 账户按钮点击事件
    document.getElementById('accountsBtn').addEventListener('click', () => {
    	if (currentUserType !== 'ADMIN') {
       		showMessage('抱歉，非管理员不可进行该操作', 'error');
        	return; // 阻止后续操作
    	}
        loadUserList();
        loadSystemSettings();
        showModal('accountsModal');
    });
    
    // 新增账户按钮点击事件
    document.getElementById('addAccountBtn').addEventListener('click', () => {
        document.getElementById('addAccountForm').reset();
        showModal('addAccountModal');
    });
    

    // 系统设置表单提交事件
	// ===================== 系统设置表单提交 - 修复版 =====================
	// 找到这部分代码并替换：
	document.getElementById('systemSettingsForm').addEventListener('submit', (e) => {
	    e.preventDefault();
	    
	    const loginAttempts = document.getElementById('loginAttempts').value;
	    const tempPasswordExpiry = document.getElementById('tempPasswordExpiry').value;
	    const defaultCardFolderName = document.getElementById('defaultCardFolderName').value;
	    
	    // 验证输入
	    if (!loginAttempts || loginAttempts < 1 || loginAttempts > 10) {
	        showMessage('登录出错次数必须在1-10之间', 'error');
	        return;
	    }
	    
	    if (!tempPasswordExpiry || tempPasswordExpiry < 1 || tempPasswordExpiry > 60) {
	        showMessage('临时密码有效期必须在1-60分钟之间', 'error');
	        return;
	    }
	    
	    if (!defaultCardFolderName || defaultCardFolderName.trim().length === 0) {
	        showMessage('默认名片夹名称不能为空', 'error');
	        return;
	    }
	    
	    // 批量更新设置
	    Promise.all([
	        updateSystemSetting('max_login_attempts', loginAttempts),
	        updateSystemSetting('temp_password_expiry_minutes', tempPasswordExpiry),
	        updateSystemSetting('default_card_folder_name', defaultCardFolderName.trim())
	    ]).then(() => {
	        showMessage('所有系统设置已保存', 'success');
	    }).catch(error => {
	        console.error('批量更新设置失败:', error);
	        showMessage('部分设置保存失败，请检查', 'error');
	    });
	});
    

	// ===================== 重置系统设置按钮 - 新增 =====================
	document.getElementById('resetSettings').addEventListener('click', () => {
	    if (confirm('确定要重置为默认设置吗？')) {
	        document.getElementById('loginAttempts').value = '3';
	        document.getElementById('tempPasswordExpiry').value = '5';
	        document.getElementById('defaultCardFolderName').value = '我的名片夹';
	        
	        showMessage('已重置为默认值，点击保存设置应用更改', 'info');
	    }
	});
    
    // 全选/全不选
    document.getElementById('selectAll').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.card-checkbox');
        const isChecked = this.checked;
        
        checkboxes.forEach(checkbox => {
            checkbox.checked = isChecked;
            // 手动触发change事件更新选中数组
            const event = new Event('change');
            checkbox.dispatchEvent(event);
        });
    });
    
 // 标签页切换事件修改版--------------------Jane------------------------------------------
    document.querySelectorAll('.tab').forEach(tab => {
      tab.addEventListener('click', function() {
          const tabContainer = this.closest('.tab-container');
          switchTab(tabContainer.tagName.toLowerCase() + '.' + tabContainer.className, this.dataset.tab);
          
      });
  }); // 标签页切换事件修改版--------------------Jane------------------------------------------
    
//修复模态框关闭按钮事件 - 使用增强版
  document.querySelectorAll('.close, [id$="cancel"]').forEach(btn => {
      // 移除现有的事件监听器
      btn.removeEventListener('click', hideModalEnhanced);
      
      // 添加增强的事件监听器
      btn.addEventListener('click', function() {
          const modal = this.closest('.modal');
          if (modal) {
              hideModalEnhanced(modal.id);
          }
      });
  });
  
  
//修复取消按钮的特殊处理
  document.getElementById('cancelAddCard').addEventListener('click', (e) => {
      e.preventDefault();
      hideModalEnhanced('addCardModal');
  });
  
  
//确保在页面加载时初始化共享名片操作
  document.addEventListener('DOMContentLoaded', function() {
      // 等待一秒确保所有脚本都加载完成
      setTimeout(() => {
          if (typeof window.shareManagement === 'undefined') {
              window.shareManagement = {};
          }
          
          // 确保hasSharedEditPermission函数存在
          if (typeof window.shareManagement.hasSharedEditPermission === 'undefined') {
              window.shareManagement.hasSharedEditPermission = function() {
                  if (!isInSharedMode || !sharedResourceInfo) {
                      return true;
                  }
                  
                  const permissionLevel = sharedResourceInfo.permissionLevel;
                  return permissionLevel === 'edit' || permissionLevel === 'EDIT';
              };
          }
          
          console.log('[DEBUG] 共享名片操作初始化完成');
      }, 1000);
  });
    
    // 点击文档其他地方关闭下拉菜单和右键菜单
    document.addEventListener('click', function(e) {
        // 关闭下拉菜单
        if (!e.target.closest('.dropdown-btn') && !e.target.closest('.dropdown-menu')) {
            document.querySelectorAll('.dropdown-menu').forEach(menu => {
                menu.classList.remove('active');
            });
        }
        
        // 关闭右键菜单
        if (!e.target.closest('.context-menu')) {
            document.getElementById('contextMenu').style.display = 'none';
        }
    });
    
    // ESC键关闭所有模态框
		// ESC键关闭所有模态框 - 修改这部分
		document.addEventListener('keydown', function(e) {
		    if (e.key === 'Escape') {
		        document.querySelectorAll('.modal').forEach(modal => {
		            modal.style.display = 'none';
		        });
		        
		        // 关闭右键菜单
		        document.getElementById('contextMenu').style.display = 'none';
		    }
		});
    
    // 退出登录
    document.getElementById('logoutBtn').addEventListener('click', () => {
        if (confirm('确定要退出登录吗？')) {
            window.location.href = 'Login.jsp';
        }
    });
}



//12. 页面初始化修复
document.addEventListener('DOMContentLoaded', () => {
    try {
        console.log('页面加载完成，开始初始化...');
        
        // 全局错误处理
        window.onerror = function(message, source, lineno, colno, error) {
            console.error('全局错误:', message, 'at', source, lineno, colno);
            showMessage('系统遇到错误，请刷新页面重试', 'error');
            return true;
        };
        
        // 首先初始化权限系统
        initEnhancedPermissionSystem().then(() => {
            console.log('权限系统初始化完成，开始初始化其他功能');
            
            // 权限系统初始化完成后，再初始化事件监听器
            initEventListeners();
            
            // 加载基础数据
            loadFolders();
            
            // 权限管理特殊初始化
            if (currentUserType === 'ADMIN' || hasPermission('manage_permissions')) {
                setTimeout(() => {
                    loadAllPermissions();
                }, 1000);
            }
            
         // 初始化共享功能
            if (typeof shareManagement !== 'undefined') {
                shareManagement.init();
            }
            
            
        }).catch(error => {
            console.error('权限初始化失败:', error);
            // 即使权限加载失败，也要初始化基本功能
            initEventListeners();
            loadFolders();
        });
        
        // 检查会话状态
        if (!username || username === 'null' || username === 'undefined') {
            showMessage('会话已过期，请重新登录', 'error');
            setTimeout(() => {
                window.location.href = 'Login.jsp';
            }, 2000);
        }
        
    } catch (e) {
        console.error('初始化错误:', e);
        alert('系统初始化失败，请刷新页面重试');
    }
});

	
	//显示消息 - 改进版，保证不会出错
	function showMessage(text, type = 'info') {
	 try {
	     const messageEl = document.getElementById('message');
	     const messageText = document.getElementById('messageText');
	     
	     if (!messageEl || !messageText) {
	         console.error('消息元素未找到');
	         alert(text);
	         return;
	     }
	     
	     // 设置图标
	     const iconEl = messageEl.querySelector('i');
	     if (iconEl) {
	         iconEl.className = '';
	         
	         if (type === 'success') {
	             iconEl.className = 'fas fa-check-circle';
	         } else if (type === 'error') {
	             iconEl.className = 'fas fa-exclamation-circle';
	         } else {
	             iconEl.className = 'fas fa-info-circle';
	         }
	     }
	     
	     messageText.textContent = text;
	     messageEl.className = 'message ' + type;
	     messageEl.classList.add('show');
	     
	     setTimeout(() => {
	         messageEl.classList.remove('show');
	     }, 3000);
	 } catch (e) {
	     console.error('显示消息错误:', e);
	     alert(text);
	 }
	}
	
	//简化的API调用函数
	async function callApi(url, method = 'GET', formData = null) {
	 try {
	     showLoader();
	     
	     const options = {
	         method: method
	     };
	     
	     if (formData) {
	         options.body = formData;
	     }
	     
	     const response = await fetch(url, options);
	     
	     if (!response.ok) {
	         throw new Error(`服务器返回错误: ${response.status}`);
	     }
	     
	     const data = await response.json();
	     hideLoader();
	     return data;
	 } catch (error) {
	     hideLoader();
	     console.error('API调用失败:', error);
	     showMessage(`操作失败: ${error.message}`, 'error');
	     throw error; // 将错误向上传播
	 }
	}
	<!--------------------------------新增账户管理部分----------------------------->
	function validateForm({username, password, confirmPassword, email}) {
	    console.groupCollapsed('[验证] 表单验证流程');
	    try {
	        // 用户名验证
	        if (!username || username.trim().length === 0) {
	            showMessage('请输入有效的用户名', 'error');
	            console.warn('用户名验证失败: 空值');
	            return false;
	        }
	        if (username.length > 20) {
	            showMessage('用户名不能超过20个字符', 'error');
	            console.warn('用户名验证失败: 超长');
	            return false;
	        }

	        // 密码验证
	        if (!password || password.length === 0) {
	            showMessage('请输入有效的密码', 'error');
	            console.warn('密码验证失败: 空值');
	            return false;
	        }
	        if (password.length < 8) {
	            showMessage('密码长度至少8位', 'error');
	            console.warn('密码验证失败: 过短');
	            return false;
	        }
	        if (password !== confirmPassword) {
	            showMessage('两次输入的密码不一致', 'error');
	            console.warn('密码验证失败: 不一致');
	            return false;
	        }

	        // 邮箱验证
	        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
	        if (!email || !emailRegex.test(email)) {
	            showMessage('请输入有效的电子邮箱', 'error');
	            console.warn('邮箱验证失败: 格式错误');
	            return false;
	        }

	        console.log('所有验证通过');
	        return true;
	    } finally {
	        console.groupEnd();
	    }
	}

	// ===================== 表单验证函数 - 修复版 =====================
	function validateForm(values) {
	    const errors = [];
	    
	    // 用户名验证
	    if (!values.username) {
	        errors.push("用户名不能为空");
	    } else if (values.username.length > 20) {
	        errors.push("用户名不能超过20个字符");
	    }

	    // 密码验证
	    if (!values.password) {
	        errors.push("密码不能为空");
	    } else if (values.password.length < 6) {
	        errors.push("密码至少需要6个字符");
	    } else if (!/[A-Za-z]/.test(values.password) || !/\d/.test(values.password)) {
	        errors.push("密码必须包含字母和数字");
	    }

	    // 确认密码
	    if (values.password !== values.confirmPassword) {
	        errors.push("两次输入的密码不一致");
	    }

	    // 邮箱验证
	    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
	    if (!values.email) {
	        errors.push("邮箱不能为空");
	    } else if (!emailRegex.test(values.email)) {
	        errors.push("邮箱格式不正确");
	    }

	    // 显示错误信息
	    if (errors.length > 0) {
	        showMessage(errors.join("\\n"), "error");
	        return false;
	    }
	    
	    return true;
	}

	// ===================== 表单提交处理器 - 修复版 =====================
	document.getElementById('addAccountForm').addEventListener('submit', async function(e) {
	    e.preventDefault();
	    const form = this;
	    
	    // 获取表单值
	    const formValues = {
	        username: document.getElementById('newAccountName').value.trim(),
	        password: document.getElementById('newPassWord').value,
	        confirmPassword: document.getElementById('confirmPassword').value,
	        email: document.getElementById('newAccountEmail').value.trim(),
	        userType: document.getElementById('newAccountType').value
	    };

	    // 禁用提交按钮防止重复提交
	    const submitBtn = form.querySelector('button[type="submit"]');
	    submitBtn.disabled = true;
	    
	    try {
	        // 执行验证
	        if (!validateForm(formValues)) return;

	        // 显示加载状态
	        showLoader();

	        // 修复：调用addUser时使用正确的参数顺序
	        // 新的参数顺序：username, email, userType, password
	        const success = await addUser(
	            formValues.username,
	            formValues.email,      // 第2个参数：email
	            formValues.userType,   // 第3个参数：userType  
	            formValues.password    // 第4个参数：password
	        );

	        // 处理成功结果
	        if (success) {
	            hideModal('addAccountModal');
	            form.reset();
	        }
	    } catch (error) {
	        console.error('表单提交异常:', error);
	    } finally {
	        // 恢复按钮状态
	        submitBtn.disabled = false;
	        hideLoader();
	    }
	});


	<!--------------------------------新增账户管理部分end----------------------------->
	
	// 通用标签页切换事件 - 排除权限管理标签页
	document.querySelectorAll('.tab:not(.permission-tab)').forEach(tab => {
	    tab.addEventListener('click', function() {
	        const tabContainer = this.closest('.tab-container');
	        
	        // 确保不是权限管理的标签页
	        if (!tabContainer.classList.contains('permission-tabs')) {
	            // 移除同一容器内所有标签的active类
	            tabContainer.querySelectorAll('.tab').forEach(t => {
	                t.classList.remove('active');
	            });
	            
	            // 为当前点击的标签添加active类
	            this.classList.add('active');
	            
	            // 获取目标内容区域的ID
	            const targetTabId = this.getAttribute('data-tab');
	            
	            // 查找对应的内容容器
	            const parentModal = tabContainer.closest('.modal-content');
	            if (parentModal) {
	                // 隐藏同一模态框内的所有内容区域
	                parentModal.querySelectorAll('.tab-content:not(.permission-tab-content)').forEach(content => {
	                    content.classList.remove('active');
	                });
	                
	                // 显示目标内容区域
	                const targetContent = document.getElementById(targetTabId);
	                if (targetContent && !targetContent.classList.contains('permission-tab-content')) {
	                    targetContent.classList.add('active');
	                }
	            }
	        }
	    });
	});
	
	
	// 打印名片
	// ==================== 3. 增强打印功能 ====================
	// 修改打印函数，支持预览和样式控制
	function printCards(cardIds, showPreview = false) {
	    console.log('打印名片，IDs:', cardIds, '预览模式:', showPreview);
	    
	    if (!checkPermissionBeforeAction('print', '打印名片')) {
	        return;
	    }
	    
	    // 如果没有指定cardIds，打印当前文件夹的所有名片
	    if (!cardIds || cardIds.length === 0) {
	        if (!currentFolder) {
	            showMessage('请先选择一个名片夹或具体的名片', 'error');
	            return;
	        }
	        // 获取当前文件夹的所有名片ID
	        const currentCards = document.querySelectorAll('.card-item[data-id]');
	        cardIds = Array.from(currentCards).map(card => parseInt(card.dataset.id));
	    }
	    
	    if (cardIds.length === 0) {
	        showMessage('没有可打印的名片', 'error');
	        return;
	    }
	    
	    showLoader();
	    
	    // 获取名片数据
	    Promise.all(cardIds.map(cardId => getCardDataForPrint(cardId)))
	        .then(cardsData => {
	            hideLoader();
	            cardsData = cardsData.filter(card => card !== null); // 过滤无效数据
	            
	            if (cardsData.length === 0) {
	                showMessage('没有有效的名片数据可打印', 'error');
	                return;
	            }
	            
	            if (showPreview) {
	                showPrintPreview(cardsData);
	            } else {
	                executePrint(cardsData);
	            }
	        })
	        .catch(error => {
	            hideLoader();
	            console.error('获取打印数据失败:', error);
	            showMessage('获取打印数据失败: ' + error.message, 'error');
	        });
	}
	
	function formatDateTime(dateTimeObj) {
	    if (!dateTimeObj || !dateTimeObj.date || !dateTimeObj.time) {
	        return 'Invalid Date';
	    }
	    
	    var year = dateTimeObj.date.year;
	    var month = String(dateTimeObj.date.month).padStart(2, '0');
	    var day = String(dateTimeObj.date.day).padStart(2, '0');
	    
	    var hour = String(dateTimeObj.time.hour).padStart(2, '0');
	    var minute = String(dateTimeObj.time.minute).padStart(2, '0');
	    var second = String(dateTimeObj.time.second).padStart(2, '0');
	    
	    return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
	}
	
	

	
	</script>
</body>
</html>